即7不适用于CSS内联块或修复

Question

我知道之前已经被问了一百万次，但我所尝试过的一切都没有解决问题。我正在研究漂亮的<select>类型的东西。我基于常见的CSS下拉导航菜单（使用嵌套的<ul>和<li> s，只需进行一些调整。其中一个调整是我需要它来显示内联（没有浮动它，因为它超过了同一行中的任何其他元素，我不想浮动它周围的所有其他元素。）我已经在浏览器中运行良好，除了7（可能还有更低，但是我不需要低于ie7的任何东西。这是代码：http://jsfiddle.net/ralokz/hjDVS/2/

如果您在任何非ie7浏览器中查看它，它看起来就像我想要的那样：

但如果你在ie7中看一下，它看起来像这样：

我看到一个针对内联块修复的网站是：http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/。这适用于ie8，但不幸的是ie7仍然看起来不正确。

还有其他方法可以修复ie7的内联块吗？或者，是否有CSS替代方法以确保第二级<li>始终与第一级<li>垂直对齐？谢谢！

Answer 1

IE6和IE7确实支持inline-block，但它们有一个主要的错误：它们只支持默认显示样式为inline的元素。

因此span {display:inline-block;}可行，但div {display:inline-block;}不会。

如果这对你来说是一个问题，那就有好消息：他们有另一个错误，这使得inline在某些情况下inline-block的工作方式正常，所以你可以简单地使用display:inline;。

如果你打算这样做，你需要小心确保只有IE6和IE7这样做，因为其他浏览器需要一个正确的inline-block;样式。为实现这一目标，可能需要一些特定于浏览器的黑客攻击或条件评论。

Answer 2

添加： position:relative;到div.dropdown ul li，摆脱div.dropdown ul li ul上的边距并设置为top:25px，left:-1px;，width:100%;最后，将div.dropdown ul li ul li设置为margin:0;，删除左右边距，并设置width:100% ...

我可能错过了一些东西，但这是一个有效的例子：http://jsfiddle.net/hjDVS/7/

我认为你真正的问题是绝对定位ul

Answer 3

对于display:inline-block的每个规则，在IE 7样式表中放置zoom:1; display:inline;这适用于所有元素，并以相同的方式工作。