IE7导致“文字”
我正在使用IE Web开发人员工具栏来解决问题。 列表项下方出现空白空白，我无法从逻辑上找出原因。 使用web dev工具栏，我发现在下面的示例1中，“文本 - 空文本节点”正在“文本 - 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
更新：好的我缩小了这个问题。 基本上，这似乎是我使用的一些属性之间的冲突。 我需要将一个标签显示为块，以便在有多行时正确包装它们。 但是我也不需要在项目之间留出空间。 我不太清楚为什么这个空白的空间解决了这个问题，并且不希望只是“破解”它。
<!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;
}
我已经看到这种情况发生在空白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>
我遇到了一个与我正在处理的内联列表类似的问题。 IE7在我的每个列表元素之后添加了少量空间。 我很难追踪这个问题，但我终于发现我的HTML中的空白空间正在导致这个空间。 我删除了白色空间，一切都修好了。 请参阅下面的示例之前和之后：
<!-- Before -->
<ul>
<li><a href="#">My Account</a></li>
<li><a href="#">Support</a></li>
<li class="last"><a href="#">Logout</a></li>
</ul>
<!-- After -->
<ul>
<li><a href="#">My Account</a></li><li><a href="#">Support</a></li><li class="last"><a href="#">Logout</a></li>
</ul>
希望这有助于某人！
链接地址: http://www.djcxy.com/p/65947.html上一篇: IE7 cause of "Text