Tips:点此可运行HTML源码

position ie6 bug / 高度塌陷

 

canrun

　IE6中很多Bug都可以通过触发layout得到解决，以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout。下列的CSS属性或取值会让一个元素获得layout：        
　　position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题
　　float:left|right 由于layout元素的特性，浮动模型会有很多怪异的表现
　　display:inline-block 当一个内联级别的元素需要layout的时候就往往符用到它，这也可能也是这个CSS属性的唯一效果—-让某个元素有layout
　　width: 除auto外的任何值
　　height: 除auto外的任何值
　　zoom: 除auto外的任何值  //个人感觉使用zoom 最方便。position ie6 bug / 高度塌陷 - 4pider - dada ;]
 
　　ie6下bottom偏移一像素
　　解决方法：父级元素的高度修改为偶数

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>absolute属性</title>
<style type="text/css">
body{
    margin:20px;
    font-family:Arial;
    font-size:12px;
}
#father{
    height:80px;
    background-color:#a0c8ff;
    border:1px dashed #000000;
    padding:12px;
    position:relative;
    zoom:1;
}
#father div{
    background-color:#fff0ac;
    border:1px dashed #000000;
    padding:10px;
    }
#block2{
position:absolute;
top:0px;
left:0px;
}
.block3{position:absolute;bottom:0;}
</style>
</head>
<body>
    <div id="father">
        <div >Box-1</div>
        <div id="block2">Box-2</div>
        <div class="block3">Box-3</div>
    </div>
</body>
</html>

 

posted @ 2013-07-27 14:45  4pider  阅读(304)  评论(0)  编辑  收藏  举报