IE兼容性 css处理常见

关于css兼容问题已经是老生常谈的问题了，今天主要是把自己遇到过的一些问题进行总结记录！

一.常用的css hack：

!important常常被我们用来识别IE6的hack，但这其实是一个误区，!important其实应该是用来增加权重从而更改样式的，ie6只是在某些情况下会忽略!important！ie6下，同一个大括号里对同一个样式属性定义，其中一个加important 则important标记是被忽略的，例：{background:red!important; background:blue;} ie6下解释为背景色blue，其它浏览器解释为背景色red；如果这同一个样式在不同大括号里定义，其中一个加important 则important发挥正常作用，例：div{background:red!important} div{background:blue}，这时所有浏览器统一解释为背景色red。

IE浏览器各版本 CSS hack 对照表

hack

写法

实例

IE6(S)

IE6(Q)

IE7(S)

IE7(Q)

IE8(S)

IE8(Q)

IE9(S)

IE9(Q)

IE10(S)

IE10(Q)

*

*color

青色

Y

Y

Y

Y

N

Y

N

Y

N

Y

+

+color

绿色

Y

Y

Y

Y

N

Y

N

Y

N

Y

-

-color

黄色

Y

Y

N

N

N

N

N

N

N

N

_

_color

蓝色

Y

Y

N

Y

N

Y

N

Y

N

N

#

#color

紫色

Y

Y

Y

Y

N

Y

N

Y

N

Y

\0

color:red\0

红色

N

N

N

N

Y

N

Y

N

Y

N

\9\0

color:red\9\0

粉色

N

N

N

N

N

N

Y

N

Y

N

!important

color:blue !important;color:green;

棕色

N

N

Y

N

Y

N

Y

N

Y

Y

说明：在标准模式中：

“-″减号是IE6专有的hack

“\9″ IE6/IE7/IE8/IE9/IE10都生效

“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

二.常见的兼容问题：

最常见也是最基础的，字体大小及标签默认样式差异，可以通过css初始化来解决如：*{margin:0; padding:0; font-size:14px;}

浮动相关：

ie6下浮动产生双倍边距。使用display:inline；解决！

DIV浮动ie6下文本产生3象素的bug。使用margin-right:-3px解决

浮动导致父级标签无法被内容撑开！使用清楚浮动来解决！

清除浮动的几种常用方式：

在使用了浮动的标签最好要清除浮动使用：clear:both;

或者给父标签确定高度，如：height:200px;

或者给父标签添加overflow:auto;为了兼容ie6要加上zoom:1;

img下的留白，使用display:block解决

有的时候在IE6上看见一些奇怪的间隙，可我们高度明明设好了呀。 解决办法：试试在有空隙的DIV上加上"font-size:0px;"

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0； 解决办法：css中首先都使用这样的样式ul,form{margin:0;padding:0;};