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

问题描述

我有这个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;在IE6 / IE7中，解决方案

display：inline-block 仅适用于自然内联的元素（例如 span

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

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

* display：inline 使用安全CSS黑客程序应用于仅IE7和更低版本。

对于IE6 / 7， zoom：1 提供 hasLayout 。具有布局是 display：inline-block 始终可以工作的先决条件。

这种解决方法同时保持有效的CSS，但它不是真的值得考虑，特别是如果你已经使用任何供应商前缀属性。

阅读此有关 display：inline-block 的更多信息（但忘记了 -moz-inline-stack 这只是现在古老的Firefox 2所需要的）。

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 }

解决方案

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

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

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

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

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

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.

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屋！