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

   

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值