IE8 怪癖模式下相邻 div 之间的奇怪间隙答案

【问题标题】：Strange gap between adjacent divs in IE8 quirks modeIE8 怪癖模式下相邻 div 之间的奇怪间隙
【发布时间】：2012-03-20 07:40:24
【问题描述】：

IE8 在 quirks 模式下遇到问题。我有一个包含两个内部 div 的外部 div 元素。

<div style="margin-left:160px; margin-top:10px; margin-right:0px; height:10px; background:blue;">
    <div style="position:relative; float:left; width:10px; height:10px; background:orange;"></div>
    <div style="position:relative; margin-left:10px; margin-right:0px;height:10px; background:green;"></div>
</div>

内部 div 应该跨越整个 wrapper div，并且在 firefox 和 chrome 中运行良好。但是当我在 IE8 中查看时，橙色 div 和绿色 div 之间有一个奇怪的差距。有谁知道如何解决这个问题（或解决它）？另外，我不能在文档中的任何地方放置 doctype 声明。

【问题讨论】：

标签： internet-explorer-8 quirks-mode html gaps-in-visuals

【解决方案1】：

在内容上使用绝对定位，在容器上使用相对定位来实现 quirks 模式：

    <html lang="en">
    <head>
        <title>Quirksmode Tests</title>
    </head>
    <body>
        <div style="position:relative; margin-left:160px; margin-top:10px; margin-right:0px; height:10px; background-color:blue;">
          <div style="position:absolute; top:0; width:100%; right:0; height:10px; background-color:green;"></div>
          <div style="position:absolute; top:0; left:0; width:10px; height:10px; background-color:orange;"></div>
        </div>
    </body>
    </html>

参考文献

【讨论】：