Question

在IE7标准模式渲染中，以下正文发生了一件奇怪的事情：

<body>
  <div style="border: 1px solid black;">
    <span style="float: right; font-style: italic;">some text to the right</span>
    other text to the left
  </div>
</body>

即使<div>宽度看起来正确，但身体宽度加倍。右边出现了大量的空白空间和一个水平滚动条。

如果我切换到IE8标准模式渲染，或者如果我保持IE7模式但删除了font-style CSS规则，页面渲染是正确的：

<body>
  <div style="border: 1px solid black;">
    <span style="float: right;">some text to the right</span>
    other text to the left
  </div>
</body>

这里发生了什么？

PS：有趣的是，如果我使用<em>或<i>代替font-style: italic，也会发生同样的情况。 <em>宽体，无 - 正常体。改变字体样式似乎打破了它，而改变字体粗细（粗体）没有任何负面影响。

Answer 1

我不确定究竟发生了什么，但话又说回来，IE以神秘的方式运作......不管怎样，这应该解决它：

<div style="border: 1px solid black; overflow: hidden;">

IE7的主体宽度随着浮动元素的增加而增加

1 个答案: