我正在使用IE Web开发者工具栏来解决问题.列表项下方出现一个空白的空格,我无法从逻辑上找出原因.使用web开发工具栏,我看到在下面的例子1中,在“Text – Google”下面输出一个“Text – Empty Text Node”.讽刺的是,在第二个,在“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
更新：好的,我缩小了这个问题.基本上看来,我正在使用的某些属性之间有冲突.我需要一个标签显示为块,所以当有多行时,它们将正确包装.但是我也不需要任何空格.我不太确定为什么这个空白的空间解决了这个问题,而不是只是“劈”它.
<!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>
解决方法
现在< a>是一个块级元素,你必须给它hasLayout.
a
{
display:block;
zoom:1;
}
