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

2019-10-28 10:23发布

下面的代码演示,我遇到的问题:

<!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中查看,谷歌标志将显示在左侧与“白色横条”运行通过它一字排开,每个段落,显示在右侧。

去除与<EM>标记的第一行导致线消失。 自己尝试一下。 删除这三个线,看看该bug的变化。

在世界上正在发生的事情与此?

-

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

Answer 1:

不知道为什么它的发生,但也有确保它不包括添加显示的许多方面:inline-block的给他们。



Answer 2:

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

当图像被漂浮在技术上没有任何自己的布局。 白条是<p>标签,因为在CSS,你给他们#FFF的背景。

对于IE7是认为<p>标签实际上开始在最左边的页面的开始,所以它开始他们那里,只是过去的颠簸漂浮的图像内容,留下有趣的白条上层建筑的浮动图像。

我会尝试让你的<p>标签左侧距避过它。 如果你赚到足够留有余量,让过去的形象,你不应该得到这些条纹了。

因此,尝试类似...

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

您可以调整沿着这些线路的左边界,但事情应该摆脱白条给你的。



文章来源: Background Color and Italics sets off Internet Explorer 7 bug