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 s）。

要使其适用于div等其他元素，您需要：

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

*display: inline使用“安全”的CSS黑客来申请only IE7 and lower。

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

可以在保留有效CSS的同时应用此变通方法，但它并不值得考虑，特别是如果您已经使用任何供应商前缀属性。

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

Answer 2

*display:inline可以正常运行 IE7 hack 。但是，您可以将zoom:1添加到代码*background:#fff; *display:inline; zoom:1。在这里，您可以添加背景颜色代码。有时候，你不会在屏幕上看到布局，例如，列表项目不会出现在屏幕上。然后，在这种情况下，这种方法效果很好，并且与其他浏览器一样。

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

2 个答案: