Question

我正在使用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>

Answer 1

现在<a>是块级元素，你必须给它hasLayout。

a
{
    display:block;
    zoom:1;
}

Answer 2

我已经看到这种情况发生在被空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>

Answer 3

这可能与“有布局”有关，你的缩放：1可能有用，也可以试试其中之一：

li { display: block; }
li { width: auto; }
li { width: 100%; }

如果你试图让列表显示为水平菜单，你可能需要通过显示来反击：内联或浮动：左。

希望有所帮助

Answer 4

我遇到了与我正在处理的内联列表类似的问题。 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>

希望这有助于某人！

Answer 5

使用Asp.Net我将<a href=""></a>代码替换为<asp:HyperLink NavigateUrl="" runat="server"></asp:HyperLink>代码并且有效。

我理解最初的问题不是关于Asp.Net，但我在自己的任务中偶然发现了它

Answer 6

我通过将align tug添加到图像来解决这个问题，就像这样（我使用的是DTD HTML 4.01 Transitional）：

在

<div class="OpenParagraph"></div>
<div><img alt="-" width="489" height="1" border="0"  src="/image/fadeBigBorder.gif"></div>
<div class="OpenParagraph"></div>

在

<div class="OpenParagraph"></div>
<div><img alt="-" width="489" height="1" border="0" align="absMiddle" src="/image/fadeBigBorder.gif"></div>
<div class="OpenParagraph"></div>

Answer 7

我遇到了这个问题，我意识到doctype和html标签不是最新的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

Answer 8

我在IE7中遇到了类似的标签问题，解决方法与上面固定

标签的人一样，只是不要在和标签中断行，问题在固定。

Answer 9

我正在点击此问题的变体，这是我在原生视图中的IE9列表项左侧的幻像点解决方案是将此样式应用于LI元素

LIST-STYLE-TYPE: none;

HTH

IE7原因“文本 - 空文本节点”

9 个答案: