web-dev-qa-db-ja.com

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 }
internet-explorerinternet-explorer-7internet-explorer-6css
77
webmasters

IE6/IE7では、display: inline-blockはnaturallyインライン（spansなど）の要素でのみ機能します。

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

#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にのみ必要でした）。

181
thirtydot

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

2
akgupta