各个浏览器的兼容性及解决方法小结

1.

ie6+都是支持百分比的。也就是说都可以流动布局和响应式布局。

ie5不支持百分比的宽高。

2.

ie9+开始识别html5的新标签。

3.

ie6以下，对于内容溢出，背景也会溢出。图为ie6的效果

.goods{
position: absolute;
left: 0;
width: 150px;
height: 50px;
float: left;
text-align: center;
background:orange;
}

 

4.ie67中的border问题

border：none;对于ie67无效，有效的写法为border：0 none;

5 ie6不支持图片背景为透明的png格式，解决方法：把png格式转换为gif的格式或者引用js修复文件

6 ie67下的display:inline-block的兼容写法

第一种：

div{  display:inline-block;
　　　*dispaly:inline;
　　　*zoom:1;
}

 

 

第二种：样式写两次，IE的经典BUG

div{
display:inline-block;
}
div{
display:inline;
}

ie浏览器的hack方法：

属性前缀：

-color:red;

“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

color：#666\9；      //IE8
* color：#999；        //IE7
_color:#fff；      //IE6

 

只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->