昨日在优化某页面的时候，发现自以为运用绝对定位将元素脱离文档流可以让其自定义宽度而不无需担心其破坏布局却在IE系浏览器下突然消失不可见，在IE Developer Toolbar修改任一属性（包括background、color等）便可使其现于视线之中。
现作简易页面记录此问题。代码如下：
- <html>
- <head>
- <title>IE下clear元素的height导致absolute元素不可见 - Edgar Hoo Lab</title>
- <style type="text/css">
- #box{position:relative;height:110px;}
- #float-left{float:left;margin:20px;}
- #absolute{position:absolute;right:10px;top:10px;}
- #clear{clear:both;height:30px;background:#f00;}
- </style>
- </head>
- <body>
- <div id="box">
- <div id="float-left">float-left</div>
- <div id="absolute">absolute</div>
- <div id="clear">clear</div>
- </div>
- </body>
- </html>
IE 8下截图，IE 6/7存在同样问题。
Google Chrome下截图，Mozilla Firefox、Safari、Opera均能正常显示。
如果去掉clear元素的height属性，那么IE系能够正常的显示。
当然，将clear元素同absolute元素换下位置，先消除掉浮动，IE系也能够正常显示。
测试地址：IE下clear元素的height导致absolute元素不可见
@ Jul. 30, 2009 SH
------这是分割线------