Jer*_*emy 15 css internet-explorer cross-browser internet-explorer-7
我正在使用IE Web开发人员工具栏来解决问题.列表项下方出现一个空白空格,我无法从逻辑上弄清楚原因.使用web开发工具栏,我看到在下面的示例1中,"文本 - 空文本节点"正在"Text - Google"下面输出.具有讽刺意味的是,在第二个中,在"Google"一词之后手动插入空格,该文本节点不再出现.如果结果被颠倒,那对我来说是完全合理的.什么想法可能导致这种奇怪的行为？
注意:这是在IE7中发生的,而不是IE8.
<li><a href="www.google.com">Google</a></li> - empty text node appears at end
<li><a href="www.google.com">Google </a></li> - no empty text node
更新:好的我已经缩小了这个问题.基本上,似乎我正在使用的某些属性之间存在冲突.我需要将a标签显示为块,因此当有多行时它们将正确包装.但我在物品之间也不需要空的空间.我不太清楚为什么那个空的空间能解决这个问题,并且不愿意只是"破解"它.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
a
{
display:block;
}
li
{
zoom: 1;
}
</style>
</head>
<body>
<ul>
<li>
<div style="background-color:blue">
<a href="#"><img src="http://www.google.com/intl/en_ALL/images/logo.gif"/></a>
</div>
<ul>
<li style="background-color:Red"><a href="#">One</a></li>
<li style="background-color:green"><a href="#">Two </a></li>
<li style="background-color:Yellow"><a href="#">Three</a></li>
</ul>
</li>
</ul>
</body>
</html>
我已经看到这种情况发生在被空div包围的图像中,这个丑陋的"文本节点"正在创建空白,将div推到它下面.
<div class="top"></div>
<img src="image.jpg" />
<div class="bottom"></div>
对我有用的解决方案是将图像包装在div中:
<div class="top"></div>
<div><img src="image.jpg" /></div>
<div class="bottom"></div>