【转】CSS兼容性问题 CSS hack:区分IE6，IE7，IE8，Firefox

总体的来说就是：*_*+识别，IE专用的条件注释，对象的实际宽度不同，消除ul、ol等列表的缩进，透明，圆角，Select控件永远处于最上 层，居中问题text-align、margin: auto，浮动后IE6解释外边距为实际边距的双倍加上display:inline，字体大小，空格大小。

---------------

1.CSS中几种浏览器对不同关键字的支持，可进行浏览器兼容性重复定义

!important 可被FireFox和IE7识别
* 可被IE6、IE7识别
_ 可被IE6识别
*+ 可被IE7识别

2.IE专用的条件注释

<!--其他浏览器 -->
<linkrel="stylesheet"type="text/css"href="css.css"/>
<!--[if IE 7]>
<!-- 适合于IE7 -->
<linkrel="stylesheet"type="text/css"href="ie7.css"/>
<![endif]-->
<!--[if lte IE 6]>
<!-- 适合于IE6及一下 -->
<linkrel="stylesheet"type="text/css"href="ie.css"/>
<![endif]-->

<!--其他浏览器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 适合于IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 适合于IE6及一下 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

 

3. 几个浏览器对实际像素的解释

IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
4.鼠标手势问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer
5.FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟px，IE也支持此写法，因此统一加px单位。如 Obj.Style.Height = imgObj.Style.Height + ‘px’;

6.FireFox无法解析简写的padding属性设置

如padding 5px 4px 3px 1px；必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0；
7.消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效

8.CSS控制透明:

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox：opacity:0.6;

9.CSS控制圆角：

IE：不支持圆角；

FireFox: -moz-border-radius:4px;或
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius- bottomright:4px;

FireFox: -moz-border-radius:4px;或
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius- bottomright:4px;

 

10.CSS双线凹凸边框：

IE：
border:2px outset;
FireFox：
-moz-border-top-colors: #d4d0c8 white;
-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080;

IE：
border:2px outset;
FireFox：
-moz-border-top-colors: #d4d0c8 white;
-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080;

11.IE支持CSS方法cursor:url()自定义光标样式文件和滚动条颜色风格；FireFox对以上两者均不支持
12.IE有Select控件永远处于最上层的bug,且所有CSS对Select控件都不起作用
13.IE支持Form中的Label标签，包括图片和文字内容；FireFox不支持包含图片的Label，点击图片不能让标记 label for 的Radio或CheckBox产生效果
14.FireFox中的TextArea不支持onScroll事件
15.FireFox不支持display的inline和block
16.FireFox对Div设置margin-left, margin-right为auto时已经居中, IE中不行
17.FireFox对Body设置text-align时, Div需要设置margin: auto(主要是margin-left margin-right) 方可居中

18.对超链接的CSS样式设置最好遵从这样的顺序：L-V-H-A。

即

<styletype="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>

<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>

这样可以避免一些访问过后的超链接就不具备hover和active样式了
19.IE中设置长段落自动换行在CSS中设置word-wrap:break-word。

20.在子容器加了浮动属性后,该容器将不能自动撑开

解决方法：在标签结束后下一个标签中加上一个清除浮动的CSS clear:both;

22.IE6下图片下方会有空隙

解决办法：为img加上display:block或设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom

23.IE6下两个层中间有空隙

解决办法：设置右侧div也同样浮动float:left或者相对IE6定义 margin-right:-3px;

24.LI中内容超过长度后以省略号的显示方法

<styletype="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>

<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>

 

25.将元素的高度和行高设为相同值，即可垂直居中文本

<styletype="text/css">
<!--
div {
height:30px;
line-height:30px;
}
-->
</style>

<style type="text/css">
<!--
div {
height:30px;
line-height:30px;
}
-->
</style>

 

26.对齐文本与文本输入框，须在CSS中增加vertical-align:middle;属性设置

<styletype="text/css">
<!--
… …
vertical-align:middle;
}
-->
</style>

<style type="text/css">
<!--
… …
vertical-align:middle;
}
-->
</style>

27.支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开，但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置min-height，为了兼容不支持min-height的IE6可以这样定义：

{
height:auto!important;
height:200px;
min-height:200px;
}

{
height:auto!important;
height:200px;
min-height:200px;
}

 

28.web标准中IE无法设置滚动条颜色

解决办法：在CSS中对body的设置改为对html的

<styletype="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>

<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>

 

29.IE6由于默认行高问题无法定义1px左右高度的容器

解决办法：在CSS中对容器设置如：overflow:hidden | zoom:0.08 | line-height:1px

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

<paramname="wmode"value="transparent"/> <!-- 解决IE上的问题 //>
<embedwmode="transparent" …… > <!-- 解决FireFox上的问题 //>

<param name="wmode" value="transparent" /> <!-- 解决IE上的问题 //>
<embed wmode="transparent" …… > <!-- 解决FireFox上的问题 //>

31.FireFox设置Padding属性后会相应的增加Width和Height属性值，IE不会
解决办法：用!important方法多定义一套Height和Width
32.FireFox对div与div之间的空格是忽略的，但IE是处理的；因此尽量在两个相连的div之间不要有空格和回车，否则可能会造成不同浏览器之间格式不正确，比如著名的3px偏差；而且原因很难查明
33.形如如下格式

<divid="parent">
<divid="content"></div>
</div>

<div id="parent">
<div id="content"> </div>
</div>

当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展；解决办法在层的最下方产生一个高度为1的空格,代码如下

<divid="parent">
<divid="content"></div>
<divstyle="font: 0px/0px sans-serif;clear: both;display: block"></div>
</div>

<div id="parent">
<div id="content"> </div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

34.IE和FireFox对字体small的尺寸解释不同，FireFox为13px,IE中为16px
35.IE和FireFox对空格的尺寸解释不同，FireFox为4px,IE中为8px

36.在netvibes的CSS看到一个片断

.transparent{
filter:alpha(opacity=12);
-moz-opacity:0.12;
opacity:0.12;
background-color:#000;
}
filter:alpha(opacity=12); 支持IE
-moz-opacity:0.12; 支持FF
opacity:0.12; css 3标准

.transparent{
filter:alpha(opacity=12);
-moz-opacity:0.12;
opacity:0.12;
background-color:#000;
}
filter:alpha(opacity=12); 支持IE
-moz-opacity:0.12; 支持FF
opacity:0.12; css 3标准

 

37 页面的最小宽度

min- width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计：

#container{
min-width: 600px;
width:e xpression(document.body.clientWidth <600? “600px”: “auto” );
}

#container{
min-width: 600px;
width:e xpression(document.body.clientWidth < 600? “600px”: “auto” );
}

第一个min-width是正常的；但第2行的width使用了Javaｓｃｒｉｐｔ，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javaｓｃｒｉｐｔ的判断来实现最小宽度。

38清除浮动

.兼容box{
display:table;
//将对象作为块元素级的表格显示
}
或者
.兼容box{
clear:both;
}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的

#box:after{
content: “.”;
display: block;

height: 0;
clear: both;
visibility: hidden;
}

#box:after{
content: “.”;
display: block;

height: 0;
clear: both;
visibility: hidden;
}

 

39 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}

#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}

HTML代码

<DIVid=box>
<DIVid=left></DIV>
<DIVid=right></DIV>
</DIV>

<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>

 

40 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。例：

<divid=”box”>
<p>p对象中的内容</p>
</div>
CSS：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

<div id=”box”>
<p>p对象中的内容</p>
</div>
CSS：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
屏蔽IE浏览器（也就是IE下不显示）
*:lang(zh) select {font:12px !important;} /*FF,OP可见*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
仅IE7识别
*+html {…}
当面临需要只针对IE7做样式的时候就可以采用这个兼容。
IE6及IE6以下识别
* html {…}
这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.x同样可以识别这个兼容。其它浏览器不识别。
html/**/ &gt;body select {……}
这句与上一句的作用相同。
仅IE6不识别
select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值，流释在冒号前。
仅IE6与IE5不识别
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
仅IE5不识别
select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别
盒模型解决方法
selct {width:IE5.x宽度; voice-family :”"}”"; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
清除浮动
select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的兼容来对父级做一次定义，那么就可以解决这个问题 。
截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。
只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

常用的应该就这么多，以后碰到在更新。

声明: 本文由( 3eyes )原创编译，转载请保留链接: CSS兼容性问题 CSS hack:区分IE6，IE7，IE8，Firefox