昨天用IE 8测试某页面时，发现点击显现隐藏的元素后其浮于其他元素之上，也即其他元素没有相应的腾出空间来容纳，其他浏览器没有出现些现象，包括IE 7。
现作简易页面记录此问题。代码如下：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title>Edgar Hoo Lab</title>
- <style type="text/css">
- #box{display:inline-block;}
- #hide{display:none;padding:20px;;border:3px solid #f00;}
- #line{background:#ccc;}
- </style>
- <script type="text/javascript">
- window.onload = function() {
- var btn = document.getElementById("btn");
- var hd = document.getElementById("hide");
- btn.onclick = function() {
- hd.style.display = hd.style.display != 'block' ? 'block' : 'none';
- };
- };
- </script>
- </head>
- <body>
- <div id="box">
- <div>
- <div><button id="btn">display</button></div>
- <div id="hide">hide</div>
- </div>
- </div>
- <div id="line">line</div>
- </body>
- </html>
经测试发现，若要产生此现象，DTD必须存在，按钮的父级div元素也必须存在。
Google Chrome下点击按钮后截图，此为期望显示。
IE 8下点击按钮后截图。
测试地址：IE8下显示的隐藏元素溢出inline-block元素
@ Aug. 18, 2009 SH
---------------这是分割线---------------