2019-6-15 第一部分 HTML5以及CSS的IE6，7的兼容性问题

本文链接：https://blog.csdn.net/qq_36223891/article/details/92206707

一．块元素和内联元素
块元素的特征：（1）默认独占一行（2）没有宽度时，默认撑满一排（3）支持所有css命令
内嵌（内联，行内）元素的特征（1）同排可以继续跟同类的标签（2）内容撑开宽度
（3）不支持宽高（4）不支持上下的maigin （5）代码换行被解析。
二．inline-block 特点
特点：（1）.块能在一行显示
（2）.行内属性标签支持宽高
（3）没有宽度的时候内容撑开宽度
三．Css的IE6，7的兼容性问题
1.h5标签兼容 IE6不支持h5标签也可以用js插件
办法:(1)document.createElement(“header”); //默认是内联元素，不支持宽高
(2)header{width:200px;height:200px;display:block;}
2.元素浮动兼容性用俩个元素都浮动来解决
3.子级超出父级宽高，p标签嵌套问题，margin传递
解决方法不要让子元素宽高超过父元素
P ,h ,td不能再嵌套块元素
margin-top传递触发BFC，haslayout 在父级加 zoom:1
上下margin叠加尽量使用同一方向的margin 比如都设置top或者bottom
4.Inline-block兼容：加一个zoom:1和display:inline
Ie6最小高度为19px:若要更小加一个overflow:hidden
5.IE6双边距问题：当元素浮动后再设置margin那么就会产生双倍边距。
解决方案：针对ie6，7添加display：inline
6.IE6，7 li里面的元素都浮动的话上下会有4px的问题
解决方案 vertical-align:top
7.IE下文字溢出BUG
俩个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px
解决方案：
俩个浮动元素中间避免出现内联元素或者注释
与父级宽度相差3px或以上
8.IE6 ,7父级元素的overflow:hidden是保不住子级的relative
解决方案：针对Ie6、7给父级元素添加相对定位
9.IE6下父级元素宽高是奇数，绝对定位元素的right和bottom值会有1px
解决方案:避免父级宽高出现奇数
10.IE6下绝对定位元素和浮动元素并列绝对定位元素消失
解决方案：浮动元素和绝对定位元素是同级的话，定位元素就会消失，所以
咱们只需要让他们俩不处于同级就可以避免这个bug
11.IE6下input的空隙
给input元素添加float
12.IE6下输入类型表单控件背景问题
解决方案：设置background-attachment：fixed
13 css hack
\9 代表所有的IE10及之前