加载中…神秘消失之IE绝对定位元素
(2011-02-16 12:29:24)
标签：
绝对定位消失ie6浮动it |
分类： CSSie6 |
名字有点噱头，不过还是踏踏实实的说吧.....
在IE中，当一个绝对定位元素与浮动元素相邻时，绝对定位元素有可能消失。
Bug病症：
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ background:#fff;}
.wrap{ margin:0px auto; width:400px; height:400px; background:#CCFFCC; position:relative; overflow:hidden;}
.son1,.son2{ width:200px; float:left; background:#003366; color:#fff; height:400px;}
.son3{ position:absolute; left:0px; top:0px; height:100px; width:100px; background:#CC99CC;}
</style>
</head>
<body>
<div class="wrap"><div class="son1">son1</div><div class="son2">son2</div><div class="son3">son3</div><div class="clear"></div>
</body>
则son3在IE6会神秘消失，这莫非就是传说中的密室杀人事件.....
吖真老中医处方：
在浮动元素与绝对定位元素之间加个空白的div把他们隔开，或者用div包住绝对定位元素即可
其他详细情况请看文章http://www.cnblogs.com/5201314/archive/2009/03/12/1409703.html，网上有很多文章，看着这个详细点，插图舒服点哈.....
在IE中，当一个绝对定位元素与浮动元素相邻时，绝对定位元素有可能消失。
Bug病症：
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ background:#fff;}
.wrap{ margin:0px auto; width:400px; height:400px; background:#CCFFCC; position:relative; overflow:hidden;}
.son1,.son2{ width:200px; float:left; background:#003366; color:#fff; height:400px;}
.son3{ position:absolute; left:0px; top:0px; height:100px; width:100px; background:#CC99CC;}
</style>
</head>
<body>
<div class="wrap"><div class="son1">son1</div><div class="son2">son2</div><div class="son3">son3</div><div class="clear"></div>
</body>
则son3在IE6会神秘消失，这莫非就是传说中的密室杀人事件.....
吖真老中医处方：
在浮动元素与绝对定位元素之间加个空白的div把他们隔开，或者用div包住绝对定位元素即可
其他详细情况请看文章http://www.cnblogs.com/5201314/archive/2009/03/12/1409703.html，网上有很多文章，看着这个详细点，插图舒服点哈.....
喜欢
0
赠金笔
前一篇：IE6兼容png24
后一篇：Css Hack汇总