背景颜色和斜体引发 Internet Explorer 7 错误
下面的代码演示了我遇到的问题：
<!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 徽标将显示在左侧，并带有“白色水平条”贯穿其中，与每个段落对齐，显示在右侧。
使用 删除第一行 标签导致线条消失。 自己尝试一下。 删除三行中的每一行，看看错误如何变化。
这到底是怎么回事？
--
解决方案：hasLayout 问题。 向 em 添加 Zoom: 1 属性可以纠正该问题。
The following code demonstrates the issue I'm encountering:
<!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>
When this code is viewed in IE7, the Google logo will be displayed to the left with 'white horizontal bars' running through it lined up with each paragraph, displayed on the right.
Removing the first line with the <em> tags causes the lines to disappear. Try it yourself. Remove each of the three lines and see how the bug changes.
What in the world is going on with this?
--
Resolution: hasLayout issue. Adding zoom: 1 attribute to em corrects the issue.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这是由于浮动图像而发生的。
当图像浮动时，从技术上讲，它没有任何自己的布局。 白条是
。 标签，因为在 CSS 中你给了它们#FFF 的背景。
对于 IE7 来说，
被认为是 标签实际上是从最左侧页面的开头开始的，因此它从那里开始，但只是将内容颠倒到浮动图像之上，在浮动图像上方留下有趣的白色条。
我会尝试通过给你的
来解决这个问题 标签左边距。 如果你有足够的左边距来穿过图像，你就不应该再看到这些条了。
因此，请尝试类似的操作...
您可以调整左边距，但沿着这些路线的操作应该可以为您消除白条。
This is happening because of the floated image.
When an image is floated it technically does not have any layout of its own. The white bars are the <p> tags, since in CSS you gave them a background of #FFF.
For IE7 is thinks the <p> tags are actually starting at the start of the page on the far left, so it starts them there, but simply bumps the content past the floated image, leaving funny white bars overtop of the floated image.
I would try getting around it by giving your <p> tags left margin. If you make enough left margin to get past the image you shouldn't get those bars anymore.
So try something like...
You can adjust the left margin but something along those lines should get rid of the white bars for you.
不确定为什么会发生这种情况，但有很多方法可以确保它不会发生，包括向 em 添加 display: inline-block 。
Not sure why it's happening, but there are many ways of making sure it doesn't, including adding display: inline-block to the em.