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; XXpx}

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

.BtnStyle{BORDER-RIGHT: #588FC7 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #588FC7 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#8CB3D9); BORDER-LEFT: #588FC7 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #588FC7 1px solid; padding-bottom:2px; width:126px; height:23px;}

因此做了一个兼容IE FF的漂亮按钮,CSS如下:

.BtnStyle {

background: url(btn.JPG);BORDER-RIGHT: #FFF 1px solid;*BORDER-RIGHT: #588FC7 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFF 1px solid;*BORDER-TOP: #588FC7 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#8CB3D9); BORDER-LEFT: #FFF 1px solid;*BORDER-LEFT: #588FC7 1px solid; CURSOR: pointer; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFF 1px solid;*BORDER-BOTTOM: #588FC7 1px solid; padding-bottom:2px;

 width:126px; height:26px;*height:23px;

}

不过需要在同文件夹下加入一下图片: