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

Question

我正在尝试使用以下HTML标记进行简单的垂直导航：

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

尽管有display: block; 在<li>和<a>元素上，IE7似乎不尊重包含div的整个宽度。 关于这个的任何想法？

http://jsfiddle.net/6eKGL/

UPDATE

我现在相信这个问题与容器div的position属性以及它的宽度由<a>元素内部的内容决定的事实有关。

Answer 1

以下是解决IE-7问题的更新小提琴。 http://jsfiddle.net/6eKGL/35/

演示： 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;
}

请参见下面的IE-7截图

Answer 2

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

Answer 3

尝试在你的html中添加一个doctype，最好是html5或xhtml 1.0 strict。 这样，IE7以标准模式呈现，而不是使用它自己的盒子模型。

另外，使用css重置。 谷歌为“埃里克梅耶重置”。

引用：

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

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

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

更新：

看到这个小提琴： 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”后尝试