背景颜色和斜体引起 Internet Explorer 7 错误答案

【问题标题】：Background Color and Italics sets off Internet Explorer 7 bug背景颜色和斜体引起 Internet Explorer 7 错误
【发布时间】：2010-11-14 06:25:20
【问题描述】：

以下代码演示了我遇到的问题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style>

p
{
    background-color:#FFF;
}


</style>
</head>
<body>

  <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style='float:left;'>
  <p><em>This is an italic sentence.</em></p>
  <p><strong>This is a bold sentence.</strong></p>
  <p>This is a normal sentence.</p>

</body>
</html>

在 IE7 中查看此代码时，Google 徽标将显示在左侧，“白色水平条”贯穿其中，与每个段落对齐，显示在右侧。

删除带有 标记的第一行会导致这些行消失。自己试试。删除三行中的每一行，看看 bug 是如何变化的。

这到底是怎么回事？

解决方案：hasLayout 问题。将 zoom: 1 属性添加到 em 可以解决问题。

【问题讨论】：

标签： css internet-explorer-7 background-color italics

【解决方案1】：

这是由于浮动图像而发生的。

当图像浮动时，从技术上讲，它没有任何自己的布局。白条是

标签，因为在 CSS 中你给了它们 #FFF 的背景。

对于 IE7，它认为

标签实际上是从页面最左侧的开头开始的，所以它从那里开始，但只是将内容撞到浮动图像之外，在浮动图像上方留下有趣的白条图片。

我会尝试通过给您的

标签留出空白来绕过它。如果您留出足够的左边距以通过图像，那么您就不应该再看到这些条了。

所以尝试类似...

p{ background-color: #fff; margin-left: 300px; }

您可以调整左边距，但沿着这些线的东西应该会为您消除白条。

【讨论】：

你知道，你总是可以去掉 p 标签上的背景颜色。至少在您的示例中，它们实际上没有任何用途，因为背景已经是白色的。如果您只是将所有内容放入其他具有#fff 背景的元素中，也可以修复它。向每个可能使浮动图像看起来很有趣的元素添加 inline-block 是一个糟糕的主意，如果您只是在一个通用标签上添加边距，那么您将使用很多也可以解决问题的标签。或者只是将您的浮动元素与其他内容一起放在 p 标签内。

【解决方案2】：

不知道为什么会这样，但有很多方法可以确保它不会发生，包括在 em 中添加 display: inline-block。

【讨论】：

谢谢，这让我可以在我的样式表中修复所有问题实例，而不是为谁知道在哪里添加边距。
...实际上，这并不能解决问题，因为现在我所有的 em 都是从他们自己的行开始的。还有什么方法可以解决这个问题？
zoom: 1 css 修正了这个问题，而不影响任何其他布局。