)記錄常用的瀏覽器CSS HACK寫法

來源:互聯網
上載者:User

原文地址:http://www.bluebirdsky.cn/article.asp?id=295

一、通用區分方式:

IE都能識別*,標準瀏覽器(如FF)不能識別*;
IE6能識別*,但不能識別 !important;
IE7能識別*,也能識別 !important;
IE8能識別/0,不能識別*,+,_,*加!important;
FF不能識別*,但能識別 !important;
例如style=”*width:10px!important; width:20px;”,其在IE6下寬度為10px,在IE7下寬度時20px

其中還有如下三種寫法:

第一種

width:100px; /* FireFox及其他瀏覽器 */width:200px/0; /* IE8能識別/0*/*width:300px!important; /* ,IE7 既能能識別*號,也能識別important */*width:400px; /* IE6也能識別*號 *//*提示:請注意順序 */

第二種

width:100px; /* FireFox及其他瀏覽器 */width:200px/0; /* IE8能識別/0*/*width:300px; /* IE7也能識別*號 */_width:400px; /* IE6能識別底線*//*提示:請注意順序 */

第三種

width:100px; /* FireFox及其他瀏覽器 */width:200px/0; /* IE8能識別/0*/+width:300px; /* +只識別IE7 */_width:400px; /* IE6能識別底線*//*提示:請注意順序 */
二、不常見的HACK(OP表示Opera,SA表示Safari),其中第3條比較實用
.color1{ color:#F00; color/*/**/:#00F /*/**/}/*IE6,IE7,IE8,FF,OP,SA識別*/.color2{ color:#F00; color /*/**/:#00F /*/9**/}/*IE7,IE8,FF,OP,SA識別*/.color3{ color:#F00; color/*/**/:#00F /9}/*IE6,IE7,IE8識別*/.color4{ color:#F00; color /*/**/:#00F/9}/*IE7,IE8識別*//*“color”和“/*/**/”之間有個空格*/
三、各種瀏覽器獨立支援的hack
width:100px/0;/* 支援IE8 */_width:100px; /* 支援IE6 */[width:100px; /* 支援IE6,7 */+width:100px; /* 支援IE6,7 */*width:100px; /* 支援IE6,7 */*width:100px!important; /* 支援IE6,7, */*+width:100px; /* 支援IE6,7, */*+width:100px!important;/* 支援IE6,7, */width:100px/9; /* 支援IE6,7,8 */width:100px!important; /* 支援IE6,7,8,FF */w/idth:100px; /*IE5.x不支援 IE6、IE7、IE8、FF支援 */
四、IE特有的條件注釋功能

1.僅IE可見的寫法

<!--[if IE]>此處內容只有IE可見<![endif]–>

2.僅IE6可見的寫法

<!–[if IE 6.0]>此處內容只有IE6.0可見<![endif]–>

3.僅IE7可見的寫法

<!–[if IE 7.0]>此處內容只有IE7.0可見<![endif]–>

4.版本區間可顯示寫法

<!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]--><!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]--><!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]--><!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->

5.非IE可見的寫法(注意:此條不符合WEB標準,但的確實用)

<!--[if !IE]>此處內容只非IE可見<![endif]-->
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.