IE6,IE7,FF兼容CSS的差别及解决办法

IE6,IE7,FF兼容CSS的差别及解决办法

CSSHACK

区别IE6与FF：

       background:orange;*background:blue;   

       background:orange;_background:blue;

       background:blue;!important;background:orange;

区别IE6与IE7：

       background:blue;!important;background:green;

       background:green;_background:blue;

区别IE7与FF：

       background:orange; *background:green;

区别FF，IE7，IE6：

       background:orange;*background:blue;!important;background:green;

       background:orange;*background:green;_background:blue;

       …

 

注：IE都能识别*;标准浏览器(如FF)不能识别*；

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

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

FF不能识别*，但能识别!important;
IE6支持下划线，IE7和firefox均不支持下划线。

 

 

IE6

IE7

FF

   *

√

√

×

!important

×

√

√

   _

√

×

×

 

IE6,IE7,FF之间差别

1.       FF: div设置 margin-left, margin-right为auto时已经居中, IE不行

2.       FF: body设置 text-align 时, div需要设置margin: auto(主要是 margin-left,margin-right)方可居中

3.       FF:设置padding 后, div 会增加height和width,但IE不会,故需要用!important 多设一个 height 和 width

4.       div的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

5.       cursor: pointer可以同时在IE FF中显示游标手指状，hand仅IE可以

6.       FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

7.       在mozilla、firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}

8.       FF中字符不能自动换行,需添加{white-space:normal;width: XXpx}

9.       兼容FF IE的漂亮Button控件:用css设计的漂亮Button按钮在FF中没法显示出特效来