0

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

<!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 徽标将显示在左侧，“白色水平条”贯穿其中，与每个段落对齐，显示在右侧。

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

这到底是怎么回事？

--

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

4

2 回答 2

3

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

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

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

我会尝试通过给你的 <p> 标签留下边距来绕过它。如果你留出足够的左边距来通过图像，你就不应该再看到这些条了。

所以尝试类似...

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

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

于 2009-07-27T13:02:05.853 回答
1

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

于 2009-07-27T09:16:36.770 回答