IE7 not respecting display: block on <ul> <li> <a>

问题

I am attempting a simple vertical navigation using the following HTML markup:

<ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
</ul>

Despite having display: block; on both the <li> and <a> elements, IE7 does not appear to respect the full width of the containing div. Any ideas on this one?

http://jsfiddle.net/6eKGL/

UPDATE

I now believe the issue is related to the position property of the container div and the fact that its width is to be determined by the content inside of the <a> elements.

回答1:

Here is the updated fiddle with IE-7 issue solved. http://jsfiddle.net/6eKGL/35/

Demo: http://jsfiddle.net/6eKGL/35/embedded/result

CSS:

#ajax-search ul li a {
    display: block;
    /*min-width: 150px;*/ // Remove this rule and the IE-7 will start respecting the display block
    padding: 9px 18px;
}

See below screenshot of IE-7

回答2:

Setting overflow: hidden on the <li> element do the trick for me !

回答3:

try adding a doctype to your html, preferrably html5 or xhtml 1.0 strict. that way, IE7 renders in standards mode and not use it's own box model.

also, use a css reset. google for "eric meyer reset".

references:

http://www.quirksmode.org/css/quirksmode.html

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

http://en.wikipedia.org/wiki/Quirks_mode

UPDATE:

see this fiddle: http://jsfiddle.net/6eKGL/23/

回答4:

Set overflow:hidden for ul and some wide width for a http://jsfiddle.net/sergeir82/N2thx/

回答5:

Try after removing "min-width" from "#ajax-search ul li a { display: block; padding: 9px 18px; min-width: 150px; }"

来源：https://stackoverflow.com/questions/8652361/ie7-not-respecting-display-block-on-ul-li-a