CSS 兼容 总结

1> margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:inline;

例如：

<div id=”IamFloat”></div>

相应的css为

#IamFloat

{

float:left;

margin:5px;

display:inline;

}

2> 给Flash设置透明属性可使层显示在Flash之上

<param name="wmode" value="transparent" />        

<!-- 解决IE上的问题 //>

<embed wmode="transparent" …… >                    

<-- 解决FireFox上的问题 //>

3> 特殊标记

IE6能识别*，但不能识别!important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

IE6支持下划线，IE7和firefox均不支持下划线。

针对IE7 不错的hack方式就是使用“*+html”

* html #abc { color: #666; }
*+html #abc { color: #999; }

background:orange;（for IE8,FF）+background:green;(for IE7)_background:blue;(for IE6)

 

4> 自动折行

IE中设置长段落自动换行在CSS中设置word-wrap:break-word；

5> 伪对象

 

#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

仅IE6和IE7识别

@media screen9 {   

.selector {  property: value; } 

}  

仅IE6和IE7、IE8识别

@media screen\,screen9 {   

.selector {  property: value; } 

} 

仅IE8识别

@media screen {   

.selector {  property: value; } 

} 

仅IE8-10识别

@media screen {   

.selector {  property: value; } 

}  

仅IE9和IE10识别

@media screen and (min-0) {   

.selector {  property: value; } }  

 

仅IE10识别

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {    

/* IE10-specific styles go here */ 

} 

 

上面几个@media配合“”、“”和“9”就能让不同版本的IE识别，那么具体项目中我们要怎么使用呢？