IE7 不尊重显示：阻塞 <ul> <li> <a>答案

【问题标题】：IE7 not respecting display: block on <ul> <li> <a>IE7 不尊重显示：阻塞 <ul> <li> <a>
【发布时间】：2012-01-28 22:57:29
【问题描述】：

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

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

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

http://jsfiddle.net/6eKGL/

更新

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

【问题讨论】：

块级元素的宽度是父元素的 100%，即使在填充和边距时，只要它们的宽度没有明确设置。所以在这种情况下最好在父级中设置宽度，块级子级会符合。
@Derek Hunzinker 亲爱的，请看看我的回答。让我知道是否有任何问题。谢谢

标签： html css internet-explorer internet-explorer-7

【解决方案1】：

在<li> 元素上设置overflow: hidden 对我有用！

【讨论】：

【解决方案2】：

这是解决了 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 的截图

【讨论】：

不错！原来这与我的特定问题无关，但这个答案确实解决了这个问题。

【解决方案3】：

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

【讨论】：

【解决方案4】：

为 ul 设置 overflow:hidden 并为 a 设置一些宽的宽度 http://jsfiddle.net/sergeir82/N2thx/

【讨论】：

感谢您的回复。我喜欢你用这个去哪里，但是，如果内容碰巧特别长，它就会溜过容器的边界。见：jsfiddle.net/N2thx/1

【解决方案5】：

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

另外，使用 css 重置。谷歌搜索“eric meyer reset”。

参考：

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/

【讨论】：

谢谢，我已经设置了 XHTML 1.0 Strict，并且已经在使用 Eric Meyer 的重置。
出于对 HTML 的兴趣，您为什么要使用 XHTML 1.0 strict？
更干净的代码和更严格的语义，以实现无错误代码。也可以解析为xml