internet-explorer - 内联 block 在 Internet Explorer 7、6 中不起作用

Question

我有这个带有 inline-block 的 CSS 代码。谁能告诉我如何让它在 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 应用于 only IE7 and lower .

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

可以在保持有效 CSS 的同时应用此解决方法，但这并不值得考虑，尤其是在您已经使用任何供应商前缀属性的情况下。

Read this有关 display: inline-block 的更多信息(但忘记 -moz-inline-stack，那只是现在古老的 Firefox 2 所必需的)。