为了账号安全,请及时绑定邮箱和手机立即绑定

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

2016.06.12 19:14 2604浏览

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以下版本的支持

  1. 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://img.mukewang.com/575d3ef30001b85808790458.png
    [2]: http://img.mukewang.com/575d3ee50001637603410257.png
点击查看更多内容
16人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消