CSS浏览器兼容

参考资料：CSS Hack Table

1. 各浏览器各自识别的标签

特殊标签	IE6	IE7	IE8	Firefox	Chrome	Safari
!important	.	Y	.	Y	.	.
_	Y	.	.	.	.	.
*	Y	Y	.	.	.	.
*+	.	Y	.	.	.	.
\9	Y	Y	Y	.	.	.
\0	.	.	Y	.	.	.
nth-of-type(1)	.	.	.	.	Y	Y

2. 区别IE和非IE浏览器

#div
{
    background:blue;/*非IE背景蓝色*/
    background:red \9;/*IE6、IE7、IE8背景红色*/

} 

3. 区别IE6、IE7、IE8、FF、Chrome、Safari

#div
{
    background:blue;/*Firefox背景蓝色*/
    background:red \9;/*IE8背景红色*/
    *background:black;/*IE7背景黑色*/    
    _background:orange;/*IE6背景橘色*/    
    /*IE系列浏览器可读[\9]，而IE6和IE7可读[*]，另外IE6可辨识[_]。因此依照顺序写下来，就会让浏览器正确的读取到自己看得懂的CSS语法。*/

}
body:nth-of-type(1) p{color:red;}/*Chrome、Safari支持*/ 

4. 条件注释判断浏览器

<!--[if !IE]>除IE外都可识别<![endif]-->

<!--[if IE]>所有的IE可识别<![endif]-->

<!--[if IE 6]>仅IE6可识别<![endif]-->

<!--[if lt IE 6]>IE6以下版本可识别<![endif]-->

<!--[if gte IE 6]>IE6以及IE6以上版本可识别<![endif]-->

符号	示例	说明
!	[if !IE]	非IE浏览器
lt	[if lt IE 5.5]	IE5.5以下版本
lte	[if lte IE 5.5]	IE5.5及其以下版本
gt	[if gt IE 6]	IE6以上版本
gte	[if gte IE 6]	IE6及其以上版本
()	[if !(IE 7)]	非IE7
&	[if (gt IE 5)&(lt IE 7)]	IE5以上，IE7以下版本
|	[if (IE 6)|(IE 7)]	IE6或IE7

 

5. margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方法是在这个div里面加上display:inline;例如：

#imfloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下理解为5px*/}

6. CSS选择符浏览器兼容性索引

短语

• yes --- 浏览器支持此选择符
• no --- 浏览器不支持此选择符
• part --- 浏览器不能完善的支持此选择符

浏览器

• IE6
• IE7
• IE7(S) --- IE7 Standards Mode
• IE7(Q) --- IE7 Quirks Mode
• IE8
• IE8(S) --- IE8 Standards Mode
• IE8(Q) --- IE8 Quirks Mode
• IE9
• FF --- Firefox
• CH --- Chrome
• OP --- Opera
• SA --- Safari

CSS 版本

• CSS1
• CSS2
• CSS3

CSS选择符浏览器兼容性

选择符	版本	IE6	IE7	IE8	IE9	FF	CH	OP	SA
E	1	yes	yes	yes	yes	yes	yes	yes	yes
*	2	yes	yes	yes	yes	yes	yes	yes	yes
E.classname	1	no	yes	yes	yes	yes	yes	yes	yes
E#idname	1	yes	yes	yes	yes	yes	yes	yes	yes
E F...	1	yes	yes	yes	yes	yes	yes	yes	yes
E > F...	2	no	yes	yes	yes	yes	yes	yes	yes
E + F	2	no	yes	yes	yes	yes	yes	yes	yes
E ~ F	3	no	yes	yes	yes	yes	yes	yes	yes
E[att]	2	no	yes	yes	yes	yes	yes	yes	yes
E[att=val]	2	no	yes	yes	yes	yes	yes	yes	yes
E[att~=val]	2	no	yes	yes	yes	yes	yes	yes	yes
E[att|=val]	2	no	yes	yes	yes	yes	yes	yes	yes
E[att^=val]	3	no	yes	yes	yes	yes	yes	yes	yes
E[att$=val]	3	no	yes	yes	yes	yes	yes	yes	yes
E[att*=val]	3	no	yes	yes	yes	yes	yes	yes	yes
E::first-line	1	yes	yes	yes	yes	yes	yes	yes	yes
E::first-letter	1	yes	yes	yes	yes	yes	yes	yes	yes
E::before	2	no	no	part（Quirks Mode版本不支持此伪元素）	yes	yes	yes	yes	yes
E::after	2	no	no	part（Quirks Mode版本不支持此伪元素）	yes	yes	yes	yes	yes
E::selection	3	no	no	no	yes	yes	yes	yes	yes
E:link	1	yes	yes	yes	yes	yes	yes	yes	yes
E:visited	1	yes	yes	yes	yes	yes	yes	yes	yes
E:hover	2	part（不支持A元素以外的其他元素的:hover伪类）	part（不支持A元素以外的其他元素的:hover伪类）	part（Quirks Mode版本不支持A元素以外的其他元素的:hover伪类）	yes	yes	yes	yes	yes
E:active	1	part（不支持A元素以外的其他元素的:active伪类）	part（不支持A元素以外的其他元素的:active伪类）	part（Quirks Mode版本不支持A元素以外的其他元素的:active伪类）	yes	yes	yes	yes	yes
E:focus	2	no	no	part（Quirks Mode版本不支持A元素以外的其他元素的:focus伪类）	yes	yes	yes	yes	yes
E:first-child	2	no	part（Quirks Mode版本不支持:first-child伪类）	part（Quirks Mode版本不支持:first-child伪类）	yes	yes	yes	yes	yes
E:lang	2	no	yes	yes	yes	yes	yes	yes	yes

7. IE6/7下实现inline-block

display:inline可以让元素以行内元素的形式显示，但是inline元素的特性：默认无法设置宽度，高度，以及上下margin，（关于padding，在ie6，7中inline元素是无法设置上下padding的，但是在标准浏览器里面是可以设置上下padding的）。鉴于inline元素的这种特性，如果我们想让元素在一行显示，而且可以设置高度，宽度以及上下margin，上下padding等属性，可以使用display:inline-block。不过在ie6，ie7不识别display:inline-block属性，这里涉及了ie6，7中的haslayout属性。ie6，7中的inline元素有个特殊的情况，就是触发了ie的haslayout属性以后就拥有了layout。此时inline元素表现和标准浏览器里面的inline-block元素基本相同。用ie的私有属性zoom来触发haslayout。

span {200px;height:50px;margin:10px;padding:20px;background:#ccc;zoom:1;}  

上面这段代码在ie6，7中span已经表现得和一个display:inline-block元素一模一样了，但在标准浏览器中span仍然是行内元素，所以需要修改成下面的代码：

span {200px;height:50px;margin:10px;padding:20px;background:#ccc;zoom:1;display:inline-block;*display:inline;}  

让标准浏览器识别display:inline-block；让ie6，7识别display:inline;然后通过zoom:1来触发haslayout让inline元素在ie中表现和inline-block元素一样。

8. 不同浏览器中，很多标签的默认样式不同，利用CSS reset文件进行样式清除，然后根据需要进行设置

html{font-family:"微软雅黑",Arial,sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,button,textarea,p,th,td{padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
a{text-decoration:none;color:#000;outline:none}
li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}

9. 添加<!DOCTYPE HTML>文档类型的声明

　　IE6浏览器，当我们没有书写这个文档声明的时候，会触发IE6浏览器的怪异解析现象。

10. IE6、IE7设置的文字高度超出盒模型内容区域设置的高度时会影响布局

　　给超出高度的标签设置overflow:hidden；或者将文字的行高line-height设置为小于块的高度。

11. 使用一个空的div设置clear:both;清除浮动，在大部分浏览器中没有问题，但在IE6中div即使是空，也会有默认行高

　　设置其高度为0，并设置overflow:hidden。｛height:0;overflow:hidden;clear:both;｝

12. IE6未声明文档类型<!DOCTYPE HTML>的情况下，两个div层float后中间出现3px的空隙，这是IE6的一个bug。

　　解决方法：在第一个div里加入margin-right:-3px;

13. 在chrome、IE8、Firefox中，有两个嵌套关系的div，如果外层div的padding值为0，那么内层div的margin-top或margin-bottom的值会“转移”给外层div。

　　解决方法：

　　（1）外层div加上overflow:hidden;

　　（2）把margin-top改成padding-top；

　　（3）使外层div的padding不为0或宽度不为0且style不为none的border；

　　（4）让外层div生成一个block formating context，以下属性可以实现：

　　　　* float:left/right

　　　　* position:absolute

　　　　* display:inline-block/table-cell

　　　　* overflow:hidden/auto

14. IE6不支持min-width、min-height、max-height、max-width这两个属性的解决方法

 expression(this.width > 300 && this.width / 300 >= this.height / 100 ? "300px" : true);    
height: expression(this.height > 100 && this.width / 300 < this.height / 100 ? "100px" : true);   

15.按钮圆角兼容

ie6,7,8不支持border-radius属性

方案一：使用ie-css3.htc

.box
{
    -moz-border-radius: 15px; /* Firefox */
    -webkit-border-radius: 15px; /* Safari and Chrome */
    border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
    -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
    -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
    box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
    behavior: url(ie-css3.htc);/*需要使用绝对路径*/
}

缺点：存在一些bug

方案二：使用多背景

上面这个圆角按钮，可以先截取按钮的左右两侧的图片。

              

然后使用多背景实现宽度可变的圆角按钮。

btn-style{
display: inline-block; padding: 8px 15px; color: #efefef; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/btnleft.png', sizingMethod='crop') \9; background: url(../images/btnright.png) right center no-repeat \9; background-color: #F0AD4E;
}

缺点：按钮的高度固定