您现在的位置:首页 >> 前端 >> 内容

css常用hack

时间:2015/6/27 9:23:25 点击:

  核心提示:突然想起今天早上在CNZZ看到的统计数据,使用IE6、7的用户比例还真多,看到之后我的心都碎了。微软都放弃了为毛还有这么多人不死心?所以说,IE下的兼容还是得做的。 ,css hack分为3种,即属性...
突然想起今天早上在CNZZ看到的统计数据,使用IE6、7的用户比例还真多,看到之后我的心都碎了。微软都放弃了为毛还有这么多人不死心?

 

所以说,IE下的兼容还是得做的。 –,–

 

css hack分为3种,即属性hack,IE条件注释hack,CSS选择器Hack

 

1、属性hack

 

对于这个我只想说网上各种答案都有,只知道复制粘贴,好多错误,测试一下不就知道了。

 

.myClass{
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9;/*IE6、7、8、9、10识别,但是IE11不支持,亲测*/
background-color:#00deff\0;/*IE8、9、10、11识别,据说还有opera*/
background-color:#00deff\9\0;/*IE8、9、10识别*/
+background-color:#a200ff;/*IE6、7识别*/
*background-color:#a200ff;/*IE6、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下会显示红色,如果不认识,应该是绿色才对。

1

 

 

 

2、条件注释hack

 

<!--[if ie ]>
  
<![endif]-->
  
<!--当然用到的还有lt,gt,lte,gte,!-->
  

 

 

 

3、选择器hack

 

说到选择器的hack,那真的是有很多很多了,

 

对于属性选择器,IE6都是不支持的,但IE7及以上是支持的

 

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

 

 

 

还有兄弟选择器,IE6都是不支持的,但IE7及以上是支持的

 

 

p + h1 //h1在p的后面相邻,二者有相同的父元素

  

p ~ h1 //所有在p的后面的h1都会选择出来

  

 

Tags:CS SS S常 常用 
作者:网络 来源:不详