内联块在Internet Explorer 7、6中不起作用


77

我的CSS代码带有inline-block。谁能告诉我如何使其在Internet Explorer 6和7中工作。有什么想法吗?也许我做错了什么?谢谢!

#signup {
   color:#FFF;
   border-bottom:solid 1px #444;
   text-transform:uppercase;
   text-align:center;
}
#signup #left {
   display: inline-block
}
#signup #right {
   background-image:url(images/signup.jpg);
   border-left: solid 1px #000;
   border-right: solid 1px #000;
   display: inline-block; 
   padding:1% 2%
   width:16%;
}
#signup #right a { font-size:100%; font-weight:bold } 
#signup #right p { font-size:90%; font-weight:bold }
#signup a:hover  { color:#FFF; text-decoration:underline }

Answers:


181

在IE6 / IE7中,display: inline-block仅适用于自然内联的元素(例如span)。

要使其在divs之类的其他元素上起作用,您需要这样做:

#yourElement {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

*display: inline使用“安全” CSS hack适用于IE7及更低版本

对于IE6 / 7,zoom: 1提供hasLayout。拥有“布局”是display: inline-block始终工作的先决条件。

可以在保留有效CSS的情况下应用此变通办法,但这并不是真正值得考虑的问题,特别是如果您已经在使用任何供应商前缀属性。

阅读此文章以获得更多信息display: inline-block(但请忽略了-moz-inline-stack,这只是现在比较古老的Firefox 2所必需的)。


我已经阅读(但无法测试)您也应该进行设置_height: ###px,只有IE6及以下版本才能理解。假设您仍然关心正式失效的浏览器。
Blazemonger,2012年

1
关于此问题的精彩文章,也涵盖了Firefox 2和IE5.5&6:blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block
s14

1
使用这些技巧的一个警告是,我们不知道将来的浏览器将如何解析前面的星号。我的规则是将条件IE语句用于单独的样式表,以方便进行这些破解。
2014年

1
@JackWilliams:所有明智的“未来浏览器”都将进行单元测试,以防止出现问题。例如,这是一个随机的WebKit。您无需担心,没有新的浏览器会接受带有垃圾内容的属性。
2014年

2

*display:inline可以作为IE7 hack正常工作。但是,您可以将zoom:1代码添加为*background:#fff; *display:inline; zoom:1。在这里,您可以放置​​背景色代码。有时,您不会在屏幕上看到布局,例如,列表项不会出现在屏幕上。然后,在这种情况下,它可以很好地工作,并且在其他浏览器中也可以看到。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.