IE下大部分兼容性都是因为haslayout属性的触发问题,尽量触发haslayout属性,可以减少很多IE下得兼容性问题,例如:
在IE6下,子级的宽度会撑开父级设置好的宽度.
准确设置好宽度.IE6中,元素浮动,如果宽度需要有内容撑开
需要给里面的块元素都设置浮动才可以.
- IE6.7下,元素要通过浮动在同一排
就需要给这行元素都加浮动.
标签的嵌套规则
行标签不能包裹块标签IE6下,元素的高度如果小于19px,会被当成19px处理
解决方法overflow:hidden.
- IE6下不支持1px的dotted边框样式
解决办法:切背景平铺(2px).
- IE6下父级有边框时,子元素margin会失效
解决办法:触发父级的haslayout属性.
- IE6下双边距的BUG, 块元素有浮动有横向的margin值时,横向的margin值会扩大两倍
解决办法:display:inline.
8.1. 一排浮动的margin-left(right)出现两倍的margin左右值
解决办法相同.
- IE6 7下,li 本身没有浮动,li 里面的内容有浮动,li 下会产生一个间隙.
解决方法:1.li加浮动. 2. li 加vertical-align:top.
9.1 在IE6下, 最小高度的 bug 和 li 的间隙问题共存时,
给 li 加浮动 .
- 当一行子级元素宽度之和和父级的宽度相差超过3px,或者子级元素不满行的情况时,最后一行的子级元素的margin-bottom会失效.
无法解决,只能避免.
- IE6下,文字溢出bug 子元素的宽度和父级的宽度如果相差小于3px的时候,两个浮动元素中间如果有注释或者内联元素,就会出现文字溢出,内联元素越多,溢出越多
解决办法: 用div把注释或者内联元素包起来.
- 当浮动元素和绝对定位元素是兄弟关系时,绝对定位失效
解决办法: 不让浮动元素和绝对元素是兄弟关系,用div或者其他标签把目标元素抱起来.
- IE6 7 下子级元素有相对定位,父级overflow包不住子级元素
给父级也加相对定位.
- IE6 下,如果绝对定位的父级宽高是奇数时,子级元素的 right 和 bottom 值会有 1px 的偏差
无法解决. 避免.
15 opacity透明度问题
filter:alpha(opacity=50).
- IE6 7 下,输入型的表单标签控件会有1px的间隙.
给input加浮动.
- IE6 PNG图片透明度问题
调用JS函数.
- IE 条件注释语句