IE9 中的简单 div 布局错误

为什么IE9不将Orangediv放在Blue旁边？div 在其他更文明的浏览器中呈现得很好，比如 Chrome 或 Firefox。宽度值完美匹配，包括边距，但需要额外的 4 个像素才能从例如 Graydiv 以使Orange出现在 IE9 中的Blue旁边（当然，这会在Orange的右侧留下 4 个像素的间隙）。

<div style="margin-top: 100px; background-color: GreenYellow; width: 740px; height: 100px; padding: 0px; overflow: visible;">
  <div style="background-color: CadetBlue; width: 210px; height: 100px; margin: 0px; padding: 0px; float: left; overflow: visible;">
  </div>
  <div style="background-color: Black; width: 100px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
  </div>
  <div style="background-color: FireBrick; width: 318px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
    <div style="background-color: LightSalmon; width: 318px; height: 48px; margin: 0px; padding: 0px; overflow: visible;">
      <!-- Gray -->
      <div style="width: 214px; height: 48px; margin: 0px 0px 0px 0px; padding: 0px; float: left; background-color: #333333; overflow: visible;">
      </div>
      <!-- Blue -->
      <div style="width: 48px; height: 48px; margin: 0px 0px 0px 4px; padding: 0px; float: left; background-color: #00A8EC; overflow: visible;">
      </div>
      <!-- Orange -->
      <div style="width: 48px; height: 48px; margin: 0px 0px 0px 4px; padding: 0px; float: left; background-color: Orange; overflow: visible;">
      </div>
    </div>
    <div style="background-color: Gainsboro; width: 318px; height: 48px; margin: 4px 0px 0px 0px; padding: 0px; overflow: visible;">
    </div>
  </div>
  <div style="background-color: Purple; width: 100px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
  </div>
</div>

那么我该如何解决这个问题呢？它要了我的命...

小提琴：http://jsfiddle.net/LE6cy/

更新

好的，我不知道这会影响它，但是在这些div之前，我在页面上还有一件事。这是一张普通的桌子。似乎一旦表格在那里，就会出现错误。所以这是整个HTML页面（真实）：

<table id="signature" cellspacing="4" cellpadding="0" style="width: 750px; height: 100px; border: 0px;">
  <tr>
    <td rowspan="2" style="height: 100px; width: 210px; background-color: #336666;">
    </td>
  </tr>
</table>
<div style="margin-top: 100px; background-color: GreenYellow; width: 740px; height: 100px; padding: 0px; overflow: visible;">
  <div style="background-color: CadetBlue; width: 210px; height: 100px; margin: 0px; padding: 0px; float: left; overflow: visible;">
  </div>
  <div style="background-color: Black; width: 100px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
  </div>
  <div style="background-color: FireBrick; width: 318px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
    <div style="background-color: LightSalmon; width: 318px; height: 48px; margin: 0px; padding: 0px; overflow: visible;">
      <!-- Gray -->
      <div style="width: 214px; height: 48px; margin: 0px 0px 0px 0px; padding: 0px; float: left; background-color: #333333; overflow: visible;">
      </div>
      <!-- Blue -->
      <div style="width: 48px; height: 48px; margin: 0px 0px 0px 4px; padding: 0px; float: left; background-color: #00A8EC; overflow: visible;">
      </div>
      <!-- Orange -->
      <div style="width: 48px; height: 48px; margin: 0px 0px 0px 4px; padding: 0px; float: left; background-color: Orange; overflow: visible;">
      </div>
    </div>
    <div style="background-color: Gainsboro; width: 318px; height: 48px; margin: 4px 0px 0px 0px; padding: 0px; overflow: visible;">
    </div>
  </div>
  <div style="background-color: Purple; width: 100px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
  </div>
</div>

你的标记中是否设置了文档类型？我做了一个小提琴 http://jsfiddle.net/LE6cy，我看到了IE9和Firefox的类似渲染。默认情况下，Jsfiddle 在结果 iframe 中设置<!doctype html>。

尝试删除空文本节点，因为<div>向左浮动

更新

相关内容

最新更新

热门标签：