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; text-decoration:underline }

どのように解決するのですか？

IE6/IE7の場合。 display: inline-block のみが動作する要素で 当然 である要素 (例えば span s).

などの他の要素でも動作するようにするために div のような他の要素で動作させるには、これが必要です。

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

*display: inline に適用するためのCSSハックとして、quot;safe" を使用しています。 に適用されるようにハックしています。 .

IE6/7の場合。 zoom: 1 が提供する hasLayout . レイアウトを持つことは display: inline-block が常に機能するための前提条件です。

有効な CSS を維持したままこの回避策を適用することは可能ですが、特にベンダープレフィックス付きのプロパティをすでに使用している場合は、考える価値がありません。

これを読む についての詳しい情報は display: inline-block (をご覧ください（ただし -moz-inline-stack は忘れてください、これは今では古くなった Firefox 2 にのみ必要でした)。