webdevqa.jp.net

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 }
77
webmasters

IE6/IE7では、display: inline-blocknaturallyインライン(spansなど)の要素でのみ機能します。

divsなどの他の要素で機能させるには、これが必要です。

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

*display: inlineは、「安全な」CSSハックを使用して、 IE7以下のみ に適用します。

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

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

これをお読みくださいdisplay: inline-blockの詳細について(ただし、-moz-inline-stackは忘れてください。これは、古代のFirefox 2にのみ必要でした)。

181
thirtydot

*display:inlineIE7 hackとして正常に動作します。ただし、zoom:1をコードとして*background:#fff; *display:inline; zoom:1。ここに、背景色コードを配置できます。たとえば、リスト項目が画面に表示されないなど、画面上にレイアウトが表示されない場合があります。次に、このような場合、これはうまく機能し、他のブラウザーと同じように表示されます。

2
akgupta