背景色和斜体衬托Internet Explorer 7中的bug

StackOverflow https://stackoverflow.com/questions/1186571

题

下面的代码说明我遇到的问题：

<!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观察，谷歌标志将被显示到左侧以“白色水平条”运行通过它排队与每一段，显示在右侧。

卸下与标记的第一行导致消失的行。自己尝试一下。删除每个的三条线，看看错误的变化。

在世界到底是怎么回事这个？

-

分辨率：hasLayout的问题。添加缩放：1个属性EM修正问题

有帮助吗？

解决方案

不知道为什么它的发生，但也有做的许多方面肯定没有，包括添加显示：inline-block的到EM

其他提示

这是因为，浮动图像的发生。

当图像被技术上浮动它不具有它自己的任何布局。白条是

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

有关IE7是认为

标签实际上开始在最左边的页面的开始，所以它开始他们那里，只是颠簸过去浮动图像的内容，留下有趣的白条上层建筑浮动的图像。

我会尝试让你的

标签左侧距避过它。如果你赚到足够留有余量，让过去的形象，你不应该得到这些条纹了。

因此，尝试类似... 

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top