Question

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

<!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徽标将显示在左侧，并在其中显示“白色横条”，并在右侧显示每个段落。

使用＆lt; em＆gt;删除第一行标签会导致线条消失。亲自尝试一下。删除三行中的每一行，看看错误是如何变化的。

世界上到底发生了什么？

-

决议：hasLayout问题。添加缩放：1属性可以解决问题。

Answer 1

由于浮动的图像，这种情况正在发生。

当图像浮动时，它在技术上没有任何自己的布局。白条是＆lt; p＆gt;。标签，因为在CSS中你给了他们#FFF的背景。

对于IE7，认为＆lt; p＆gt;标签实际上是从最左边的页面开始处开始的，因此它会在那里启动它们，但只是将内容碰到漂浮的图像，在浮动的图像上方留下有趣的白条。

我会试着通过给你的＆lt; p＆gt;来解决这个问题。标签左边距。如果你留下足够的左边距来通过图像，你就不应该再拿到那些条了。

所以试试像......

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

你可以调整左边距，但沿着那些线条的东西应该为你摆脱白条。

Answer 2

不确定为什么会这样，但有很多方法可以确保它不会发生，包括向em添加display：inline-block。

Background Color和Italics引发Internet Explorer 7错误

2 个答案: