常见兼容性问题 ==> 解决方案:
1. 标准浏览器内容不会撑开设置好的宽高, 但是在低版本IE下,内容会撑开设置好的宽高
计算一定要精确,不要让内容的宽高超出我们设置的宽高
2. 在低版本IE下,元素浮动,如果宽度需要内容撑开,就给里面的块元素都加浮动
3. 在低版本IE下,元素要通过浮动并在同一行,就给这行元素都加浮动
4. p标签的嵌套规则
5. IE6下的最小高度问题(19px)
设置一个高度,然后使用overflow:hidden;
6. IE6下 不支持 1px dotted
切背景平铺
7. IE6下margin传递的问题
1. 父级或者子级浮动
2. 触发haslayout ==> 父级添加 zoom:1; overflow:hidden;
3. 给父级添加一个边框,但是会出现一个新的兼容性问题
在IE6下,父级有边框的时候, 子元素的margin值消失
触发父级haslayout ==> 再添加一个zoom:1;
8. margin上下叠压 ==> 尽量设置一个方向的高度,去最大值
9. IE6下双边距bug (IE6下,块元素有浮动,有横向的margin值)
margin-right: 一行右侧第一个元素有双边距
margin-left : 一行左侧第一个元素有双边距
display:inline
10. IE6.7下,li本身没有浮动,但是li的内容有浮动 ==> li间隙问题
1. li ==> float + width 并且父级还要清理浮动
2. 给li ==> vertical-align:top;
当IE6下最小高度和li的间隙共存的时候, ==> 给li 使用第一种方案
11. IE6 当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候
最后一行子元素的下margin在IE6下就会失效 ==>
暂时没有好的解决方案
12. IE6下的文字溢出bug
产生的原因:
子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间
有注释或者内嵌元素
解决办法:
1. 用div把注释或者内嵌元素用div包起来
2. 调大父级的宽度
13. 当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失
解决办法:
给定位元素外面包个div
14. 在IE6,7下,子元素有相对定位的话,父级的overflow包不住子元素
给父级也加相对定位
15. 透明度的问题
标准: opacity : 0-1;
IE : filter:alpha(opacity= 0- 100);
16. 在IE6下,绝对定位元素的父级宽高是奇数的时候,元素的right和bottom值会有1px的偏差
尽量设置为偶数,其他没有好的解决方案
17. 在IE6下, position:fixed; 不兼容
1. 使用JS
2. 使用CSS
19. 在IE6，7下输入类型的表单控件上下各有1px的间隙
给input加浮动
20. 在IE6，7下输入类型的表单控件加border:none;
重置input的背景
21. 在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动
把背景加给父级
代码地址