刚更新的css hack技巧

我不是女神ヾ 2023-08-17 17:20 103阅读 0赞

一 一般Hack

1概念：

不同的浏览器对CSS的解析效果不同，为了达到相同的效果，就得根据不同浏览器写不同的css

2规则：

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对IE浏览器。

类内部Hack：比如 IE6能识别下划线"\_"和星号" \* "，IE7能识别星号" \* "，但不能识别下划线"\_"，而firefox两个都不能认识。等等

选择器Hack：比如 IE6能识别\*html .class\{\}，IE7能识别\*+html .class\{\}或者\*:first-child+html .class\{\}。等等

HTML头部引用(if IE)Hack：针对所有IE：<!\[endif\]-->，针对IE6及以下版本：<\[endif\]-->这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。

举个栗子：

background: #f00;   各浏览器都认识，主要给高级浏览器用
    
    background: blue\0; 网上说是给IE8的，不过经过测试，IE10、9、8都认识他。
    
    background:#F60\0\9;  这个东西是给IE8 玩
    
    background: red\9;  这个东西好玩了，所有的ie都认识他。
    
    +background: yellow;   *或+ 留给了IE7、6 这一点还是不错的
    
    _background:black; _专门留给ie6
    
     
    
    :root .test{background: blue\9;} :root是给ie9的，网上流传了个版本是 :root #test { background:blue\0;}，新版opera也认识，所以经过反复验证最终ie9特有的为:root 选择符 {属性\9;}

<table> 
 <tbody> 
  <tr> 
   <td>浏览器内核</td> 
   <td>Trident</td> 
   <td>Trident</td> 
   <td>Trident</td> 
   <td>Trident</td> 
   <td>Trident</td> 
   <td>Trident</td> 
   <td>Gecko</td> 
   <td>Presto</td> 
   <td>WebKit</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>IE6</td> 
   <td>IE7</td> 
   <td>IE8</td> 
   <td>IE9</td> 
   <td>IE10</td> 
   <td>IE11</td> 
   <td>FF</td> 
   <td>Opera</td> 
   <td>Sarari</td> 
  </tr> 
  <tr> 
   <td>*</td> 
   <td>T</td> 
   <td>T</td> 
   <td>F</td> 
   <td>F</td> 
   <td>F</td> 
   <td>F</td> 
   <td>&nbsp;F</td> 
   <td>F</td> 
   <td>F</td> 
  </tr> 
  <tr> 
   <td>_</td> 
   <td>T</td> 
   <td>F</td> 
   <td>F</td> 
   <td>F</td> 
   <td>F</td> 
   <td>F</td> 
   <td>F</td> 
   <td>F</td> 
   <td>F</td> 
  </tr> 
  <tr> 
   <td>！important</td> 
   <td>&nbsp;见下面详解</td> 
   <td>&nbsp;T</td> 
   <td>&nbsp;T</td> 
   <td>&nbsp;T</td> 
   <td>&nbsp;T</td> 
   <td>&nbsp;T</td> 
   <td>&nbsp;T</td> 
   <td>T</td> 
   <td>T</td> 
  </tr> 
  <tr> 
   <td>@cc_on（特性检测）激活条件编译</td> 
   <td>&nbsp;见下面详解</td> 
   <td>&nbsp;见下面详解</td> 
   <td>&nbsp;见下面详解</td> 
   <td>&nbsp;见下面详解</td> 
   <td> <p>&nbsp;</p> <p>if(/*@cc_on!@*/false){ </p> <p>　　　　　　document.documentElement.className+='ie10';</p> <p>}</p> <p>&nbsp;</p> </td> 
   <td> 
    <div>
      &nbsp;if (/*@cc_on!@*/true) { 
    </div> 
    <div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.documentElement.className += ' ie' + document.documentMode; 
    </div> 
    <div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
    </div> </td> 
   <td> 
    <div>
      同IE11 
    </div> </td> 
   <td> 
    <div>
      &nbsp;同IE11 
    </div> </td> 
   <td> 
    <div>
      &nbsp;同IE11 
    </div> </td> 
  </tr> 
  <tr> 
   <td>&nbsp;\9</td> 
   <td>&nbsp;T</td> 
   <td>&nbsp;T</td> 
   <td>&nbsp;T</td> 
   <td>&nbsp;T</td> 
   <td>&nbsp;T</td> 
   <td>&nbsp;T</td> 
   <td>&nbsp;F</td> 
   <td>F</td> 
   <td>F</td> 
  </tr> 
  <tr> 
   <td>\0</td> 
   <td>F</td> 
   <td>F</td> 
   <td>T</td> 
   <td>T</td> 
   <td>T</td> 
   <td>T</td> 
   <td>&nbsp;F</td> 
   <td>T</td> 
   <td>F</td> 
  </tr> 
  <tr> 
   <td>\9\0</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>T，其余F</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

3标准盒模型：元素宽度=width+padding+border+margin

IE: 元素宽度=width+margin(padding和border都包含在width中了)

4

我们可以通过这种方法在里面加上只想让IE解析的东西，比如css,js,HTML。，其他浏览器会把他们当成注释。

5多类选择符的写法：

#my.c1.c2 { color:red;}
    .c1.c2 { color:red;}

以上代码在IE6中会被理解为

#my.c2 { color:red;}
    .c2 { color:red;}

在开发中最好不用多类选择器这样组合，因为IE6会只会读最后一个。  
6!important在ie6中

识别：

不识别：

也就是说在在一个选择器中利用!important改变样式的优先级是没有用的，在不同选择器中又是可以的。

7关于ie8-9:请注意一些细小的差别：

background-color:red\0;IE8和IE9都支持；
    background-color:blue\9\0; 仅IE9支持；

background: red\9; /*所有的 ie*/
    :root .test{background: red\9;} /*ie9*/

8@cc\_on 语句的用法

/*@cc_on @*/
    /*@
    document.write("JScript version: " + @_jscript_version + ".");
    document.write("
    ");
    @if (@_win32)
    document.write("Running on the 32-bit version of Windows.");
    @elif (@_win16)
    document.write("Running on the 16-bit version of Windows.");
    @else
    document.write("Running on a different operating system.");
    @end
    @*/

9火狐浏览器

@-moz-document url-prefix() \{ .selector \{ property: value; \} \}  
上面是仅仅被Firefox浏览器识别的写法，具体如：

@-moz-document url-prefix() \{ .demo \{ color:lime; \} \}  
支持Firefox的还有几种写法：

/\* 支持所有firefox版本 \*/ \#selector\[id=selector\] \{ property: value; \} 或者： @-moz-document url-prefix() \{ .selector \{ property: value; \} \} /\* 支持所有Gecko内核的浏览器 (包括Firefox) \*/ \*>.selector \{ property: value; \}

10 Webkit枘核浏览器(chrome and safari)

@media screen and (-webkit-min-device-pixel-ratio:0) \{ Selector \{ property: value; \} \}  
上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和 Safari浏览器：

@media screen and (-webkit-min-device-pixel-ratio:0) \{ .demo \{ color: \#f36; \} \}

11 Opera浏览器

html:first-child>body Selector \{property:value;\} 或者： @media all and (min-width:0) \{ Selector \{property: value;\} \} 或者： @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) \{ head~body Selector \{ property: value; \} \}  
上面则是Opera浏览器的Hack写法：

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) \{ head~body .demo \{ background: green; \} \}

二、完美主义写法  
这种方法是追求完美主义的写法，主要是配合我们上一节所说的IE条件注释，全部采用选择器Hack的写法。这种写法分两步：

1、创建条件样式表，并在HTML中body里添加相应的class类名：

<!–\[if IE6\]–><<!–\[if IE7\]–><!–\[if IE8\]–><!–\[if IE9\]–><!–\[if !IE\]–>  
2、接着创建对应的样式

.demo \{color: blue;\}/\*现代浏览器\*/ .non-ie .demo \{color: red;\}/\*除IE外浏览器\*/ .ie9 .demo \{color: yellow;\}/\*IE9浏览器\*/ .ie8 .demo\{color: green;\}/\*IE8浏览器\*/ .ie7 .demo \{color: orange;\}/\*IE7浏览器\*/ .ie6 .demo \{color: lime;\}/\*IE6浏览器\*/ @media all and (min-width: 0px)\{ .demo \{color:black;\} /\* webkit and opera \*/ \} @media screen and (-webkit-min-device-pixel-ratio:0)\{ .demo\{color:\#369;\}/\* webkit \*/ \} @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) \{ head~body .demo\{color:\#cf6;\}/\* opera \*/ \} @-moz-document url-prefix()\{ .demo\{color:\#963;\}/\* firefox \* / \}

转载于:https://www.cnblogs.com/s-z-y/p/4508710.html