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

Question

我有一个带有此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 }

Answer 1

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

要使其在诸如的其他元素上起作用div，您需要这样做：

#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所必需的）。