針對主流瀏覽器的CSS-HACK寫法及IE常用條件注釋

作者: Mr.Think  來源: 博客園  發布時間: 2010-09-09 21:24  閱讀: 1190 次  推薦: 0   原文鏈接   [收藏]  
摘要:在web網頁開發過程中,瀏覽器兼容是令開發人員非常頭疼的意見事情。本文比較全面系統的介紹總結CSS針對各瀏覽器的兼容HACK(以IE6/IE7/IE8 /FF為主),以及IE特有的條件注釋使用方法.

  對于前端工作者,最痛苦的事莫過于瀏覽器兼容性的調試,而這最痛苦的事中,最變態的莫過于微軟的三個版本IE6.0/IE7.0/IE8.0. 為了讓所寫代碼在各主流瀏覽器中正常運行,我們不得不為各種瀏覽器寫對應的樣式。本文,青鳥將為你總結CSS針對各瀏覽器的兼容HACK(以IE6/IE7/IE8 /FF為主),以及IE特有的條件注釋使用方法.
  一、通用區分方式:
  IE6、IE7能識別*,標準瀏覽器(如FF)不能識別*;
  IE6能識別*,但不能識別 !important;
  IE7能識別*,也能識別 !important;
  IE8能識別\0,不能識別*,+,_,* 加!important;
  FF不能識別*,但能識別 !important;
  例如style=”*width:10px!important; width:20px;”,其在IE7下寬度為10px,在IE6下寬度是20px.
  其中還有如下三種寫法:
  第一種

 

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

 

  第二種

 

width:100px; /* FireFox及其他瀏覽器 */
width:200px\0; /* IE8能識別\0*/
*width:300px; /* IE7也能識別*號 */
_width:400px; /* IE6能識別下劃線*/
/*Mr.Think提示:請注意書寫順序@MrThink.net*/

 

  第三種

width:100px; /* FireFox及其他瀏覽器 */
width:200px\0; /* IE8能識別\0*/
+width:300px; /* +只識別IE7 */
_width:400px; /* IE6能識別下劃線*/
/*Mr.Think提示:請注意書寫順序@MrThink.net*/

  

   二、不常見的HACK(OP表示Opera,SA表示Safari),其中第3條比較實用

    1..color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA識別*/
    2..color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA識別*/
    3..color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8識別*/
    4..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特有的html條件注釋使用規則
  1.僅IE可見的寫法

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

  2.僅IE6可見的寫法

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

  3.僅IE7可見的寫法

    <!–-[if IE 7]>此處內容只有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]-->
0
0
 
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()