CSS样式常用的兼容hack写法

不念不忘少年蓝@ 2023-02-08 12:57 35阅读 0赞

虽然现在低版本的浏览器不再推荐使用，但是国内仍然避免不了一大群人在依旧坚持使用。

如IE6

.bg\{

background:\#ccc;

\_background:\#bbb;/\*兼容ie6的写法\*/

此顺序不可乱，正常的写在前面，hack写法在后面；

以下是摘抄过来的：

（1）方式一 条件注释法

只在IE下生效

<!--\[if IE\]>

这段文字只在IE浏览器显示

<!\[endif\]-->

只在IE6下生效

<!--\[if IE 6\]>

这段文字只在IE6浏览器显示

<!\[endif\]-->

只在IE6以上版本生效

<!--\[if gte IE 6\]>

这段文字只在IE6以上(包括)版本IE浏览器显示

<!\[endif\]-->

只在IE8上不生效

<!--\[if ! IE 8\]>

这段文字在非IE8浏览器显示

<!\[endif\]-->

非IE浏览器生效

<!--\[if !IE\]>

这段文字只在非IE浏览器显示

<!\[endif\]-->

（2）方式二 类内属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

IE浏览器各版本 CSS hack 对照表

<table style="border-spacing:0px; border-collapse:collapse; color:rgb(51,51,51); font-family:arial,宋体,sans-serif; font-size:12px; line-height:18px"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      hack 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      写法 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      实例 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      IE6(S) 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      IE6(Q) 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      IE7(S) 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      IE7(Q) 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      IE8(S) 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      IE8(Q) 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      IE9(S) 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      IE9(Q) 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      IE10(S) 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      IE10(Q) 
    </div> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      * 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      *color 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      青色 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      + 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      +color 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      绿色 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      - 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      -color 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      黄色 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      _ 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      _color 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      蓝色 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      # 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      #color 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      紫色 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      \0 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      color:red\0 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      红色 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      \9\0 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      color:red\9\0 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      粉色 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      !important 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      color:blue !important;color:green; 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      棕色 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      N 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
   <td style="margin:0px; padding:2px 10px; line-height:22px; height:22px; border:1px solid rgb(230,230,230)"> 
    <div style="word-wrap:break-word; margin:0px; line-height:24px; zoom:1; height:auto">
      Y 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

说明：在标准模式中

*  “-″减号是IE6专有的hack
 *  “\\9″ IE6/IE7/IE8/IE9/IE10都生效
 *  “\\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
 *  “\\9\\0″ 只对IE9/IE10生效，是IE9/10的hack

（3）CSS hack方式三：选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

目前最常见的是

\*html \*前缀只对IE6生效\*+html \*+前缀只对IE7生效@media screen\\9\{...\}只对IE6/7生效@media \\0screen \{body \{ background: red; \}\}只对IE8有效@media \\0screen\\,screen\\9\{body \{ background: blue; \}\}只对IE6/7/8有效@media screen\\0 \{body \{ background: green; \}\} 只对IE8/9/10有效@media screen and (min-width:0\\0) \{body \{ background: gray; \}\} 只对IE9/10有效@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) \{body \{ background: orange; \}\} 只对IE10有效等等