CSS 内联块在 Internet Explorer 7、6 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5838454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inline block doesn't work in internet explorer 7, 6
提问by webmasters
I have this CSS code with an inline-block. Can anyone tell me how to make it work in Internet Explorer 6 and 7. Any ideas? Maybe I'm doing something wrong? Thank you!
我有这个带有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 }
回答by thirtydot
In IE6/IE7, display: inline-blockonly works on elements that are naturallyinline (such as spans).
在 IE6/IE7 中，display: inline-block仅适用于自然内联的元素（例如spans）。
To make it work on other elements such as divs, you need this:
要使其适用于其他元素，例如divs，您需要：
#yourElement {
display: inline-block;
*display: inline;
zoom: 1;
}
*display: inlineuses a "safe" CSS hack to apply to only IE7 and lower.
*display: inline使用“安全”CSS hack仅适用于IE7 及更低版本。
For IE6/7, zoom: 1provides hasLayout. Having "layout" is a prerequisite for display: inline-blockto always work.
对于 IE6/7，zoom: 1提供hasLayout。拥有“布局”是display: inline-block始终工作的先决条件。
It is possible to apply this workaround while keeping valid CSS, but it's not really worth thinking about, particularly if you're already using any vendor prefixed properties.
可以在保持有效 CSS 的同时应用此解决方法，但实际上并不值得考虑，特别是如果您已经在使用任何供应商前缀属性。
Read thisfor more information about display: inline-block(but forget about -moz-inline-stack, that was only required for the now ancient Firefox 2).
阅读本文以获取有关display: inline-block（但忘记-moz-inline-stack，只有现在古老的 Firefox 2 才需要）的更多信息。
回答by akgupta
*display:inlineworks fine as IE7 hack. But, you can add zoom:1to the code as *background:#fff; *display:inline; zoom:1. Here, you can put your background color code. Sometime, you will not see the layout on the screen, say, for example, list-items will not appear on screen. Then, in such cases this works great and appear as it does in other browsers.
*display:inline作为IE7 hack工作正常。但是，你可以添加zoom:1到代码*background:#fff; *display:inline; zoom:1。在这里，您可以放置背景颜色代码。有时，您不会在屏幕上看到布局，例如，列表项不会出现在屏幕上。然后，在这种情况下，这很好用，并且在其他浏览器中显示效果很好。
