与layout特性相关的IE解析bug和解决方法

最新推荐文章于 2020-03-27 23:31:22 发布

原创最新推荐文章于 2020-03-27 23:31:22 发布 · 603 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了解决IE浏览器中外部div无法控制内部浮动div的问题。通过为外层div添加特定样式，如高度声明、display：inline-block或zoom：1，可以在不同情况下触发IE特有的layout特性。

如下面的代码：

<style type="text/css">
	#box {
	background:red;
	width:80px;
	height:80px;
	float:left;
	}
	#wrap {
	border:solid 1px blue;
	}
	</style>

<div id="wrap">
	<div id="box"></div>
	</div>

对于IE浏览器来说，外层元素<div id="wrap">无法控制其包含的元素<div id="box">，是因为外层元素没有layout布局特性。解决这个问题的方法是在IE中触发外层元素的layout特性。例如，给它定义一个高度，这个高度可以设置得非常小，避免该高度对于元素的实际高度的影响，所得效果如图所示。这个高度声明不是真的要定义元素显示多高，而是作为一个layout的特性触发器。

#wrap{

height：1%；

}

这种方法对于IE的任意元素都有效，除了标准兼容模式下的IE6版本中的行内元素。但是这种方法不能够与overflow：hidden；一起使用，否则这个定义的高度就会对元素的实际高度产生影响。当然这种共同的情况也有一个除外，那就是在IE6 标注模式下，overflow：hidden；声明不会对这个高度产生实际影响，因为这时如果父元素没有显示定义高度，那么height：1%；会自动被IE6解析为height：auto。

使用高度来触发IE元素的layout特性是最佳的选择。不过如果当为元素声明了overflow：hidden之后，使用高度来触发layout特性就会出现各种问题，在这种情况下可以用display：inline-block或zoom：1声明来触发layout特性。

#wrap{

display：inline-block;

}

或

#wrap{

zoom：1；

}

除了避免与overflow;hidden;声明冲突之外，上面这两种方法还可以适用行内元素，以及在IE标准模式下触发元素的layout特性。