1、H5标签在IE低版本不兼容的问题:(浏览器不识别标签)
解决方案:
<script>
document.createElenment('header'); //动态创建的自定义标签默认inline
</script>
<style>
header{display:block;}
</style>
或 <script src="html5shiv.js"></script>
2、第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题:
(首先不建议这样写,第一块浮动脱离了文档流提升了半层的层级,而第二块还是原本的层级,这样写容易出现问题)
解决方案:
div2{margin-left:200px;}换成div2{float:left;}
3、IE6下子元素超出父级宽高,会把父级的宽高撑开:
解决方案:
不要让子元素的宽高超过父级。
4、margin的兼容性问题:
(1)margin-top的传递
解决方案:触发BFC(overflow:hidden;)、haslayout(zoom:1;)
.wrap{overflow:hidden;zoom:1;}
(2)上下margin的叠压
解决方案:尽量使用同一方向的margin,比如都设置top或bottom
5、display:inline-block不兼容IE低版本:
解决方案:div{*display:inline;*zoom:1;}
6、IE6 最小高度(19px)问题:
解决方案:div{overflow:hidden;}
7、IE6 双倍边距:
解决方案:div{*display:inline;}
8、li里元素都浮动 li在IE6 7下方会产生4px间隙问题:
解决方案:li{vertical-align:top;}
9、浮动元素之间注释(并且和父级元素相差不超过3px),导致多复制一个文字的问题:
解决方案:(1)两个浮动元素中间避免出现内联元素或注释
(2)与父级元素宽度相差3px或以上
10、IE6、7父级元素的overflow:hidden;包不住子级的relative:
解决方案:针对IE6、7给父级元素添加相对定位*position:relative;
11、IE6下绝对定位元素的父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差:
解决方案:避免父级宽高出现奇数。
12、IE6下绝对定位元素和浮动元素并列绝对定位元素消失:
解决方案:让绝对定位元素与浮动元素不处于同级状态。
13、IE6下input的空隙:
解决方案: input{*float:left;}
14、IE6下输入类型表单控件背景移动问题:
解决方案: input{background-attachment:fixed;}
15、IE6不支持png24 图片:
解决方案:<script src="DD_belatedPNG_0.0.8a.js"></script>(JS插件不能处理body之上png24)
<script>DD_belatedPNG.fix('xxx');</script>
.body{_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");}
(IE原生滤镜)
<mark>妙味课堂</mark>