Phantom height when specifying the width of a LI using jQuery

问题

On a simple ul and li structure like this:

<div id="middle">
    <ul>
        <li>
            <a>
                bridal
            </a>                    
        </li>
        //....
    </ul>
</div>

ul is displayed as table and li as table cell. I am using jquery to fix the width of the li, after they are loaded on the DOM. This is to stabilize the width when font family is changed.

But, at chrome I get a phantom height and the the width of a is 10px+ more than the jQuery calculates.

Help me fix these: http://jsfiddle.net/qK8Yr/

Note: If I remove the code to set the width, the phantom height goes away.

回答1:

Try the following CSS for this class

http://jsfiddle.net/qK8Yr/3/

nav#mainNavigation a
{
cursor: pointer;
font-family: 'Verdana';
font-size: 11px;
font-weight: bold;
display: block;
padding: 3px 0px !important;

}

回答2:

It adds 5px left padding, 5px right padding and 2px of border width from your css. if you can not find which css effects. comment back

    nav#mainNavigation > div > ul > li > .relContainer > a {
padding: 7px 5px;
}

the tag take this css

来源：https://stackoverflow.com/questions/18650991/phantom-height-when-specifying-the-width-of-a-li-using-jquery