IE7不尊重显示：阻止<ul> <li> <a>

Question

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.

Answer 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

Answer 2

设置overflow: hidden在<li>元素上为我做的伎俩！

Answer 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/

Answer 4

设置overflow:hidden了UL和一些宽幅的 http://jsfiddle.net/sergeir82/N2thx/

Answer 5

从“＃ajax-search ul li a {display：block; padding：9px 18px; min-width：150px;}”中删除“min-width”后尝试