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

时间:2022-08-26 15:28:35

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]-->