背景颜色和斜体引起 Internet Explorer 7 错误
Posted
技术标签:
【中文标题】背景颜色和斜体引起 Internet Explorer 7 错误【英文标题】：Background Color and Italics sets off Internet Explorer 7 bug 【发布时间】：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 可以解决问题。
【问题讨论】：
【参考方案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 修正了这个问题，而不影响任何其他布局。以上是关于背景颜色和斜体引起 Internet Explorer 7 错误的主要内容，如果未能解决你的问题，请参考以下文章
如何从 Internet Explorer 中的父元素继承 textarea 的背景颜色？