首页手记低版本IE的兼容问题小贴士

低版本IE的兼容问题小贴士

标签：

Html/CSS Html5 CSS3

1.H5标签兼容问题
对于H5标签不兼容IE6/IE7/IE8的问题，类似header，section，footer，我们可以使用js中动态创建标签的方法document.createElement(“header”);css中H5标签是内联元素，添加display:block;的方法解决问题
pie.js和pie.css是网上提供的免费部分兼容样式；
2. 元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动;

		<style>
			.box{
				width: 400px;
				border: 1px solid black;
				overflow:hidden;
			}
			.left{
				float: left;
				background-color: red;
			}
			.right{
				float: right;
				background-color: blue;
			}
			h2{
				float: left;
				margin: 0;
				height: 30px;
			}
		</style>
		<!--
			解决方案：float: left;
		-->
	</head>
	<body>
		<div class="box">
			<div class="left">
				<h2>左边</h2>
			</div>
			<div class="right">
				<h2>右边</h2>
			</div>
		</div>
	</body>

3. 第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题;
解决方案：1、不建议这么写,脱离文档刘和不脱离文档流不在一个层级上，导致渲染解析出现问题2、用浮动解决。

4. IE6下子元素超出父级宽高，会把父级的宽高撑开
解决方案：不要让子元素的宽高超过父级

5. p 包含块元素嵌套规则。
当我们使用p来包含一个DIV,然后我们审查元素就会发现，就会变成如下代码；![图片描述][2]

6. margin兼容性问题
1、margin-top传递
添加border可以截断，overflow:hidden zoom:1可以完美解决这个问题，主要是触发BFC、haslayout
2、上下margin叠压
尽量使用同一方向的margin，比如都设置top或者bottom

7. display:inline-block
解决方案：
*display:inline;
*zoom:1;触发haslayout

8.IE6 最小高度问题
IE6下最小高度19px
解决方案：overflow:hidden;

9.IE6 双边距
当元素浮动后再设置margin那么就会产生双倍边距
解决方案：针对ie6、7添加display:inline

10. li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题
解决方案：针对ie6，7添加vertical-align: top;

11. 浮动元素之间注释，导致多复制一个文字问题
两个浮动元素中间有注释或者内联元素,并且和父级宽度相差不超过3px
解决方案：1、两个浮动元素中间避免出现内联元素或者注释
2、与父级宽度相差3px或以上

12.IE6 7 父级元素的overflow:hidden 是包不住子级的relative
解决方案：针对ie6、7给父级元素添加相对定位。

13. IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1PX的误差
解决方案：避免父级宽高出现奇数

14. IE6下绝对定位元素和浮动元素并列绝对定位元素消失
解决方案：浮动元素和绝对定位元素是同级的话定位元素就会消失。所以咱们只要让他们俩不处于同级就可以避免这个bug。加一个P元素

15. IE6 下input的空隙
解决方案：给input元素添加float

16. IE6 下输入类型表单控件背景问题
解决方案：设置background-attachment：fixed;

17. 针对不同的浏览器写不同的CSS 样式的过程，就叫CSS hack!
\9 IE10以及IE10以下版本的支持

IE7以及IE7以下版本的支持
_ IE6以及IE6以下版本的支持
18. IE6不支持png24 图片。
解决方案：
JS插件(问题:不能处理body之上png24)
DD_belatedPNG.fix(‘xxx’);
原生滤镜
_background:none;_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=“XX.png”, sizingMethod=“crop”);
19. 样式优先级、提升样式优先级
默认 < 类型 < class < id < style(行间) < !important
!important 提升样式优先级权重
[1]: http://img1.sycdn.imooc.com//575d3ef30001b85808790458.png
[2]: http://img1.sycdn.imooc.com//575d3ee50001637603410257.png