css HACK - Cynthia娆墨旧染

1、什么是CSS hack?

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号<br>（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的，<br><br>比如.kwstu{width:300px;_width:200px;}<br>一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_width:200px;<br>由于下划线_width只有IE6可以识别，所以此样式在IE6中实际设置对象的宽度为200px，后面的把前面的给覆盖了，<br>而其他浏览器不识别_width不会执行_width:200px;这句样式，所以在其他浏览器中设置对象的宽度就是300px;

 

2.CSS hack解决问题

<span style="color: #000000;">CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题，

如margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍，也就是说margin</span>-<span style="color: #000000;">left:20px;在ie6中距左侧对象的实际显示距离是40px，而在非ie6中显示的距左侧对象的距离是设置的值20px;

所以要想设置一个对象距离左侧对象的距离在所有浏览器中都显示是20px的宽度的样式应为：.kwstu{margin</span>-left:20px;_margin-left:20px;}。

 

3、浏览器识别字符标准对应表

 

 

从上图可以分析出以下几种情况：<br><br>1<span style="color: #000000;">.大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。

</span>2.\9<span style="color: #000000;">    ：所有IE浏览器都支持

</span>3._和-<span style="color: #000000;">  ：仅IE6支持

</span>4.*<span style="color: #000000;">     ：IE6、E7支持

</span>5.\0<span style="color: #000000;">    ：IE8、IE9支持，opera部分支持

</span>6.\9\0<span style="color: #000000;">  ：IE8部分支持、IE9支持

</span>7.\0\9  ：IE8、IE9支持

 

<span style="color: #000000;">所以我们可以把顺序写成这样：（这也是兼容各大主流游览器的汇总）<br><br>.element{<br><br>　　color:#000;             /*w3c标准*/<br><br>　　[;color:#f00;];         /*Webkit(chrome和safari)*/<br><br>　　color:#666\9;           /*IE8*/<br><br>　　*color:#999;            /*IE7*/<br><br>　　_color:#333;            /*IE6*/<br><br>}<br>　　:root .element{color:#0f0\9;}  /*IE9*/<br><br>　　@media all and (-webkit-min-device-pixel-ratio:10000), not all and (<br><br>　　-webkit-min-device-pixel-ratio:0) { <br>　　　　.element{color:#336699;}<br>　　}  /*opera*/<br><br>　　@-moz-document url-prefix(){<br>　　　　.element{color:#f1f1f1;}<br>　　} /*Firefox*/<br></span>

 

(1)清除浮动

在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

<span style="color: #000000;">select:after {
　　content:”.”;
　　display:block;
　　height:</span>0<span style="color: #000000;">;
　　clear:both;
　　visibility:hidden;
}</span>