可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm using the IE web developer toolbar to troubleshoot an issue. A blank white space is appearing below a list item, and I can't logically figure out why. Using the web dev toolbar, I see that in example 1 below, a "Text - Empty Text Node" is being output below "Text - Google". Ironically, in the second, with a space manually inserted after the word "Google", that text node no longer appears. It would make complete sense to me if the results were reversed. Any ideas what may cause this odd behavior?

Note: this is occuring in IE7, but not 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

Update: Ok I've narrowed down this issue. Basically, it seems like there's a conflict between some of the attributes I'm using. I need the a tags to be display as block, so they will wrap correctly when there are multiple lines. But I also need no empty space in between the items. I'm not quite sure why that empty space solves the problem, and would prefer not to just "hack" it.

<!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>

回答1:

Now that the <a> is a block level element, you have to give it hasLayout too.

a
{
    display:block;
    zoom:1;
}

回答2:

I've seen this occur with images surrounded by empty divs as well in which this ugly "text node" was creating whitespace that pushed the div below it down.

<div class="top"></div>
<img src="image.jpg" />
<div class="bottom"></div>

The solution that worked for me was to wrap the image in a div:

<div class="top"></div>
<div><img src="image.jpg" /></div>
<div class="bottom"></div>

回答3:

I encountered a similar issue with an inline list that I was working on. IE7 was adding a small amount of space after each one of my list elements. I had difficulty tracking down the issue but I finally discovered that the white space in my HTML was causing the space. I removed the white space and everything was fixed. See before and after example below:

<!-- 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>

Hope this helps out someone!

回答4:

this may have to do with the "has layout", your zoom: 1 may work, also try one of these:

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

you may have to counter act these with a display: inline, or float: left if your trying to get the list to show up as a horizontal menu.

hope that helps

回答5:

Working with Asp.Net I replaced the <a href=""></a> tags with the <asp:HyperLink NavigateUrl="" runat="server"></asp:HyperLink> tags and it worked.

I understand the original question is not about Asp.Net, but I stumbled across it in my own quest

回答6:

I resolved this cause by adding the align tug to image, like this (i'm use DTD HTML 4.01 Transitional ):

Before

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

After

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

回答7:

I had this issue and I realized the doctype and html tags were not up to date

<!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>

回答8:

i have faced a similar issue in tag in IE7, the solution is same as above guy who fixed

tag, just do not break line in the and tag, the issue in fixed.

回答9:

I was hitting a variation of this iisue which is a phantom dot to the left of my list item in IE9 in native view The solution was to apply this style to the LI element