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

时间:2011-06-22 20:41:58

标签: html css internet-explorer-7

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

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

good menu

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

bad menu

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

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

3 个答案:

答案 0 :(得分:3)

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

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

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

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

答案 1 :(得分:3)

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

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

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

答案 2 :(得分:2)

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