[英]ie 7 doesn't work with CSS inline-block or fixes
I know that this has been asked a million times before, but nothing that I have tried has solved the problem. 我知道这已被问过一百万次了,但我所尝试过的一切都没有解决问题。 I'm working on a nice looking
<select>
type thing. 我正在做一个漂亮的
<select>
类型的东西。 I'm basing it off of common CSS drop down navigation menus (using nested <ul>
s and <li>
s, just with a few tweaks. One of the tweaks is that I need it to display inline (without floating it because it goes past any other elements in the same line as it, and I don't want to float everything else around it). I've got it working well in the browsers besides ie 7 (and probably anything lower, but I don't need anything lower than ie7). Here is the code: http://jsfiddle.net/ralokz/hjDVS/2/ 我基于常见的CSS下拉导航菜单(使用嵌套的
<ul>
和<li>
s,只需进行一些调整。其中一个调整是我需要它来显示内联(没有浮动它,因为它经过同一行中的任何其他元素,并且我不想漂浮其周围的所有其他元素。)我已经在浏览器中运行良好,除了7(可能更低,但我不需要低于ie7的任何东西。这是代码: http : //jsfiddle.net/ralokz/hjDVS/2/
If you look at that in any non-ie7 browser, it looks like how I want it to: 如果你在任何非ie7浏览器中查看它,它看起来像我想要它:
But if you look at it in ie7, it looks like this: 但如果你在ie7中看它,它看起来像这样:
One site that I saw come up a lot for the inline-block fix is this: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ . 我看到的内联块修复的一个站点是: http : //blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ 。 That worked for ie8, but unfortunately ie7 still doesn't look right.
这适用于ie8,但不幸的是ie7仍然看起来不正确。
Is there any other way to fix inline-block for ie7? 有没有其他方法来修复ie7的内联块? Or, is there a CSS alternative to make sure the the second level
<li>
s are always vertically aligned with the the first level <li>
? 或者,是否有CSS替代方法以确保第二级
<li>
始终与第一级<li>
垂直对齐? Thanks! 谢谢!
IE6 and IE7 do support inline-block
, but they have a major bug with it: They only support it on elements which have a default display style of inline
. IE6和IE7确实支持
inline-block
,但它们有一个主要的错误:它们只支持具有inline
默认显示样式的元素。
Therefore span {display:inline-block;}
will work, but div {display:inline-block;}
doesn't. 因此
span {display:inline-block;}
将起作用,但div {display:inline-block;}
不起作用。
If this is an issue for you, there's good news: they have another bug, which makes inline
work the way inline-block
is supposed to in some cases, so you may be able to simply use display:inline;
如果这对你来说是一个问题,那就有好消息:它们有另一个错误,它使
inline
工作的方式在某些情况下应该是inline-block
,所以你可以简单地使用display:inline;
. 。
If you are going to do this, you need to be careful to make sure that only IE6 and IE7 do this, as other browsers will need a proper inline-block;
如果你打算这样做,你需要小心确保只有IE6和IE7这样做,因为其他浏览器需要一个正确的
inline-block;
style. 样式。 Some browser-specific hacks or conditional comments may be required to achieve this.
为实现此目的,可能需要一些特定于浏览器的黑客攻击或条件注释。
Add: position:relative;
添加:
position:relative;
to div.dropdown ul li
, get rid of the margins on div.dropdown ul li ul
and set it's top:25px
, left:-1px;
到
div.dropdown ul li
,摆脱div.dropdown ul li ul
的边缘并设置它的top:25px
, left:-1px;
, width:100%
; ,
width:100%
; finally, set div.dropdown ul li ul li
to margin:0;
最后,将
div.dropdown ul li ul li
为margin:0;
delete the left-right padding, and set width:100%
... 删除左右边距,并设置
width:100%
...
I might have missed something, but here's a working example: http://jsfiddle.net/hjDVS/7/ 我可能错过了一些东西,但这是一个有效的例子: http : //jsfiddle.net/hjDVS/7/
I think your real problem was the absolutely positioned ul
我认为你真正的问题是绝对定位的
ul
For each rule with display:inline-block
, in the IE 7 stylesheet put zoom:1; display:inline;
对于每个带
display:inline-block
规则display:inline-block
,在IE 7样式表中放置zoom:1; display:inline;
zoom:1; display:inline;
This works with all elements, and works about the same way. 这适用于所有元素,并以相同的方式工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.