浏览器兼容性 小结

兼容性

一、IE5，IE6不兼容HTML5标签
解决办法：

若只有少量标签：可采用自定义标签的方式

<script>
document.createElement('header'); //自定义元素，默认为内联元素
</script>
<style>
header{display:block;}
</style>

大量标签：

使用JS库
<script src='js/html5shiv.js'></script>

二、 IE6，IE7中元素浮动失效
解决办法：

给元素设置宽度
如果元素不能设置宽度，那么就给元素内部的块级元素也设置浮动

三、IE6下浮动元素与margin元素间出现缝隙

<span class='span1'></span>
<span class='span2'></span>

.span1{width:100px; height:100px;float:left;}
.span2{margin-left:100px;}

解决办法：

1.不提倡这种写法，因为设置浮动的元素的层级提升了，在渲染时不好
2.如果必须这样写，那么就给两个元素都设置浮动

四、IE6中，不要让子元素的宽高大于其父级元素

五、

，，不能嵌套块级元素

六、IE6中，margin-top传递问题不能使用为父级元素添加border的方法解决

解决办法：

.box{overflow:hidden;
zoom:1;}

七、IE6，IE7中，当元素浮动时，会出现双倍margin

解决办法：*代表 for IE6,IE7

div{*display:inline;}  

八、、IE6，IE7中，当li的子元素浮动时，li之间会出现4px的间隙

解决办法：*代表 for IE6,IE7

li{*vertical-align:top;}

九、浮动元素之间，如果有注释或者内联元素，并且浮动元素和其父级元素的宽度差小于3px，会导致多复制一个文字
解决办法：

1.不要出现注释或者内联元素
2.宽度差大于3px

十、IE6,IE7中，父元素设置overflow:hidden;超出隐藏，但是如果子元素设置了position:relative，会导致超出隐藏失效
解决办法：给父元素设置

.father{*position:relative;}

十一、IE6中，父级元素宽高为奇数时，会出现1px偏差

这种情况，就要出问题：
.son{position:absolute; left:0; top:0;}
.father{position:absolute;/或者 position:relative;/}/并且宽高为奇数/
解决办法：避免父级元素宽高为奇数，就好啦~

十二、IE6中，absolute元素和float元素并列或者处于同级，会导致absolute元素消失

解决办法：别让他俩并列啦

十三、IE6中，input元素会露出父级元素背景色

解决办法：

input{float:left;}

十四、IE6中，可输入的表单控件的背景，会被输入的内容挤走

解决办法:

{background-attachment:fixed;}

十五、CSS hack

\9:支持IE7-10

background-color:blue\9;

*:支持IE6，IE7及以下

*background-color:blue;

_:支持IE6及以下

_background-color:red;

十六、IE6不支持PNG24的图片
解决办法：

使用js插件：

<script src='js/DD_belatedPNG-8.0.8a.js'></script>
<script>
DD_belatedPNG.fix('img,div'); //括号内写有png24图片的标签
</script>

使用原生滤镜（透明度）

body{
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src'',sizingMethod'',/*还有啥...*/)
}

十七、样式优先级顺序

！important > 行间样式 > #id > .class > 标签