# 浏览器兼容性 小结
https://www.zybuluo.com/denglongku/note/532873
一、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 > 标签
