浏览器兼容性ie6

最新推荐文章于 2019-10-17 23:07:47 发布

玉羲

最新推荐文章于 2019-10-17 23:07:47 发布

阅读量369

点赞数

本文链接：https://blog.csdn.net/weixin_41762742/article/details/84036890

版权

头文档与怪异盒模型

在老版本IE下，不设置文档声明，页面就会陷入怪异盒模型解析
标准盒模型:
width/height = content;
可视宽/高 = content + padding + border;
怪异盒模型
width/height = 可视宽/高;
content = width - padding - border;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box {
	width: 200px;
	height: 200px;
	padding: 50px;
	border: 20px solid #000;
	/* chrome 260 * 260 */
	/* ie6 200 * 200 */
}
#div {
	height: 100px;
	background: red;
	/* chrome 200 * 100 */
	/* ie6 140 * 100 */
}
</style>
</head>
<body>
	<div id="box">
		<div id="div"></div>
	</div>
</body>
</html>

在IE6下，块属性元素的高度小于19px的时候，高度会按照19px来处理.

		解决办法：overflow:hidden;

在chrome下，文字大小小于12px的时候，会被当做12px来处理

		解决办法: 用图片代替;

在IE6下，1px的点线会显示成虚线

		解决办法: 用图片代替;

在IE6下给边框加transparent的时候，border-style最好设置成虚线(dashed)，经过实测，虚线、点线都可以

在IE6，7下，不支持给块标签加inline-block;

	解决办法:
		在inline-block下，添加以下代码
		*display:inline;
		*zoom:1;

		* IE7 以及IE7以下的浏览器认识			
	haslayout IE渲染引擎中的一个属性,用来调节元素的渲染模式,当我们把这个属性设置为true的话，这个元素就跟根据自身的内容大小或者父级的大小，来重新计算自己的宽高.
		触发hasLayout的样式：
			* display: inline-block
			* height: (任何值除了auto)
			* float: (left 或 right)
			* position: absolute
			* width: (任何值除了auto)
			* zoom: (除 normal 外任意值)

在IE6下，父级有边框的话，可能会造成子元素的margin失效

	解决办法:触发haslayout;

同级有浮动元素,最好所有同级元素都浮动

玉羲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器兼容性ie6

头文档与怪异盒模型在老版本IE下，不设置文档声明，页面就会陷入怪异盒模型解析标准盒模型:width/height = content;可视宽/高 = content + padding + border;怪异盒模型width/height = 可视宽/高;content = width - padding - border;&lt;!DOCTYPE html&gt;&lt;ht...
复制链接

扫一扫