ホームページ >ウェブフロントエンド >CSSチュートリアル >インライン ブロック要素が Internet Explorer 6 および 7 で動作しないのはなぜですか?

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-21 08:11:13229ブラウズ

Why Aren't My Inline-Block Elements Working in Internet Explorer 6 and 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>
<pre class="brush:php;toolbar:false">display: inline-block;
*display: inline;
zoom: 1;

}

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

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。