背景色和斜体衬托Internet Explorer 7中的bug
-
19-09-2019 - |
题
下面的代码说明我遇到的问题:
<!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; }
您可以调整左边距,但沿着这些线路的东西应该得到您摆脱白条。
不隶属于 StackOverflow