内联块在 Internet Explorer 7、6 中不起作用 [英] Inline block doesn't work in internet explorer 7, 6

问题描述

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

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!

#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 }

推荐答案

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

In IE6/IE7, display: inline-block only works on elements that are naturally inline (such as spans).

要使其适用于其他元素，例如 divs，您需要:

To make it work on other elements such as divs, you need this:

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

*display: inline 使用安全"CSS hack 应用于 仅适用于 IE7 及更低版本.

*display: inline uses a "safe" CSS hack to apply to only IE7 and lower.

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

For IE6/7, zoom: 1 provides hasLayout. Having "layout" is a prerequisite for display: inline-block to always work.

可以在保持有效 CSS 的同时应用此解决方法，但实际上并不值得考虑，特别是如果您已经在使用任何供应商前缀的属性.

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.

阅读本文以了解有关显示的更多信息: inline-block(但是忘记 -moz-inline-stack，它只在现在古老的 Firefox 2 中需要).

Read this for more information about display: inline-block (but forget about -moz-inline-stack, that was only required for the now ancient Firefox 2).

这篇关于内联块在 Internet Explorer 7、6 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！