我知道之前已经被问了一百万次,但我所尝试过的一切都没有解决问题。我正在研究漂亮的<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>
垂直对齐?谢谢!
答案 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:25px
,left:-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;
这适用于所有元素,并以相同的方式工作。