即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规则display:inline-block ，在IE 7样式表中放置zoom:1; display:inline; zoom:1; display:inline; 这适用于所有元素，并以相同的方式工作。