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

      如下面的代码： 

<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特性。