css經常使用hack

原文地址：css經常使用hack

忽然想起今天早上在CNZZ看到的統計數據，使用IE六、7的用戶比例還真多，看到以後個人心都碎了。微軟都放棄了爲毛還有這麼多人不死心？

因此說，IE下的兼容仍是得作的。 –，–

css hack分爲3種，即屬性hack，IE條件註釋hack，CSS選擇器Hack

一、屬性hack

對於這個我只想說網上各類答案都有，只知道複製粘貼，好多錯誤，測試一下不就知道了。

.myClass{
background-color:#f1ee18;/*全部識別*/
background-color:#00deff\9;/*IE六、七、八、九、10識別，可是IE11不支持，親測*/
background-color:#00deff\0;/*IE八、九、十、11識別,聽說還有opera*/
background-color:#00deff\9\0;/*IE八、九、10識別*/
+background-color:#a200ff;/*IE六、7識別*/
*background-color:#a200ff;/*IE六、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}

　　

這裏要注意的一點用法是在IE6下，

.myClass{
background:red!important;
background:green;
}

　　

那麼，會顯示綠色green。若是我這樣子寫呢？

.myClass{
background:green;
background:red!important;
}

　　

那麼你會發現顯示的背景爲紅色，親測。那就說明，IE6不認識important了嗎？固然是錯的，

h1{
 background: red!important;
 }
 h1{
 background: green;
 }

　　

你會發現上面的樣式在IE6下會顯示紅色，若是不認識，應該是綠色纔對。

 

二、條件註釋hack

<!--[if ie ]>
 
<![endif]-->
 
<!--固然用到的還有lt,gt,lte,gte，！-->

　　

三、選擇器hack

說到選擇器的hack，那真的是有不少不少了，

對於屬性選擇器，IE6都是不支持的，但IE7及以上是支持的

[attr*=val]//多個值
 
[attr^=val]
 
[attr$=val]
 
[attr~=val]//值之間有空格

　　

還有兄弟選擇器，IE6都是不支持的，但IE7及以上是支持的

p + h1 //h1在p的後面相鄰，兩者有相同的父元素
 
p ~ h1 //全部在p的後面的h1都會選擇出來

　　

再好比，最經常使用的僞類

:after

:before

IE8及以上支持，親測。

對於css3的::after和::before僞元素與此僞類一直混淆不清，只知道IE9及以上才支持。

最後固然就是css3的一些僞類選擇器了，只有IE9及以上才支持，彷佛css3的僞類選擇器都只有IE9及以上才支持。

:root

:nth-child(n)

:nth-of-type(n)

詳細能夠參照官方文檔

還能夠參考這篇文章