インライン ブロック要素が Internet Explorer 6 および 7 で動作しないのはなぜですか?

インライン ブロック要素を Internet Explorer 6 および 7 で動作させる

Q: CSS コードでインライン ブロック要素を使用しています。ただし、Internet Explorer 6 および 7 では正しく動作しません。何をしているのでしょうか。間違っていますか?

サインアップ {

color:#FFF;
border-bottom:solid 1px #444;
text-transform:大文字;
text-align:center;
}

signup #left {

display: inline-block
}

signup #right {

background-image:url(images/signup.jpg);
border-left: 実線 1px #000;
ボーダー右: 実線 1px #000;
表示: インラインブロック;
パディング:1% 2%
width:16%;
}

signup #right a { font-size:100%; font-weight:bold }

サインアップ #right p { font-size:90%; font-weight:bold }

サインアップ a:hover { color:#FFF; text-decoration:underline }

A: Internet Explorer 6 および 7 では、inline-block はスパンのような自然なインライン要素に対してのみ機能します。 div などの他の要素で機能させるには、次のものが必要です:

</p>
<h1>yourElement {</h1>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: inline-block;
*display: inline;
zoom: 1;

ログイン後にコピー

}

• *display: インラインは CSS ハック固有です
• zoom: 1 は、要素にレイアウトがあることを保証します。これは、インラインブロックが機能するための要件です。

有効なパラメータを使用してこの回避策を実装することは可能です。 CSS、特にベンダープレフィックス付きのプロパティをすでに使用している場合には、お勧めできません。インラインブロックの詳細については、このリソースを参照してください。

以上がインライン ブロック要素が Internet Explorer 6 および 7 で動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。