每个浏览器不同的内核,不同的处理引擎,不同的渲染引擎就会导致写同一条样式的时候出现差异 这个现象叫做做兼容
浏览器:Ie(6 7 8 9 10 11) 谷歌 火狐 苹果
Ie6 7的常见的兼容性的问题
H5标签兼容。
(js文件引入)
第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题;
(第二块元素也float)
IE6下子元素超出父级宽高,会把父级的宽高撑开
(绕过)
p 包含块元素嵌套规则。
(绕过)
margin兼容性问题 合并 塌陷(传递)
(float border overflow:hidden)
display:inline-block 的问题
(display:inline;zoom:1)
IE6 最小高度问题
(overflow:hidden)
IE6 双边距
(*display: inline;)
li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题
(*vertical-align: top;)
IE6 7 父级元素的overflow:hidden 是包不住子级的relative
(*position: relative; )
IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差
(设为偶数)
IE6 下input的空隙
(*float: left;)
IE6 下 输入类型表单控件背景问题
(background-attachment: fixed;)
IE6不支持背景透明的问题
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix("i");
</script>
引人一个js文件包