css – IE7原因为“文本 – 空文本节点”

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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效