CSS表示インラインブロック互換性問題の書き方

今日レイアウトを書いていたらバグを発見しました。これをしないと期待した効果が得られず、ie6とie7は対応していないことが分かりました。 display:inline-block なので、CSS ハックを使用する必要があります。 互換性:
IE6 および IE7 はインラインブロックを認識しませんが、ブロック要素をトリガーできます。

他の主流ブラウザはインラインブロックをサポートしています。

IE6 と IE7 の互換性を解決する方法:

1. まず、レイアウトの特性を持つ inline-block トリガーのブロック要素を設定し、次に、display:inline を設定してブロック要素を
inline 要素として表示します。このとき、レイアウトの特性が消えることはありません。
2. display:inline を直接設定し、zoom:1 を使用してレイアウトをトリガーします。

すべてのブラウザと互換性があります:

CSSコードコンテンツをクリップボードにコピー

1. display:inline-block; /*最新のブラウザ +IE6、7 インライン要素 */

2. *

   display:inline; /* IE6、7 ブロック要素 */

*zoom:1; 以下は簡単な紹介です:

3. 1.
デモの例

2. display:inline-block の機能は何ですか?

inline 要素または block 要素をインライン ブロックにするには、display:inline-block 属性を使用します。 , わかりやすく簡単に言うと、float属性を追加することなく独自の幅と高さを定義でき、同時に親要素の中央に要素を簡単に表示することができます！

3. display:inline-block はいつ使用されますか?
Web サイトのレイアウトでは、多くの場合、span 要素や block 要素の li タグなどのインライン要素が子要素で使用され、タグの数は可変です。このブロックをいくつあっても中央に表示させたい（子要素全体の幅は可変）！ここで、display:inline-block が役に立ちます。


4. IE6/7はdisplay:inline-block属性をサポートしていますか?
inline 要素で display:inline-block 属性を定義すると、IE6 および IE7 の表示効果が他のブラウザーと一致していることがわかりますが、実際には、ie7 以前のバージョンの
ie ブラウザー
は表示をサポートしていません。 inline- この属性をブロックしてください!
正確な説明は「inline-block属性を使用するとIE上でレイアウトがトリガーされるため、要素に設定した幅と高さが反映されるため、他のブラウザと同じ表示効果になるとは言えません。」です。 IE6/7ではdisplay:inline-blockに対応しました！ 5. インライン要素は、display:inline-block を定義するだけでよく、表示効果はすべてのブラウザで同じになります。 IE7 でブロック要素の display:inline-block の効果を実現するにはどうすればよいですか? ?

IE では、display: inline-block は要素のレイアウトのみをトリガーします。たとえば、display: inline-block を p に設定すると、p がブロック要素の特性を持つことが保証されるだけですが (幅、高さなどを設定できます)、それでも改行は発生します。次に、改行が発生しないように、display: inline を設定する必要があります。同じスタイルに display:inline-block;*display:inline; を記述します。 inline-block 属性は要素のレイアウトをトリガーしないため、レイアウトをトリガーするには *zoom:1 を追加する必要があります。 IE7 のブロック要素はどのようにして、display:inline-block 書き込みメソッドと互換性を持つことができますか?
実際に効果的な方法は 2 つあります:

方法 1: インライン オブジェクトとしてレンダリングされるブロック要素を直接設定し (display:inline 属性を設定)、ブロック要素のレイアウトをトリガーします (ズームなど)。 1など）。さまざまなブラウザと互換性のあるコードは次のとおりです: p {display:inline-block;*display:inline; *zoom:1;...}
方法 2: まず、display:inline-block 属性を使用してブロック要素をトリガーします。を定義してから、display:inline を定義すると、ブロック要素をインライン オブジェクトとしてレンダリングできるようになります (有効にするには、2 つのディスプレイを 2 つの CSS スタイル宣言に配置する必要があります。これは IE の古典的なバグです。display:inline-block が最初に定義されている場合、表示をインラインまたはブロックに戻すと、レイアウトは消えません)。コードは次のとおりです (...他の属性は省略されています): p {display:inline-block;...}p {*display:inline;}


7. 間の余分な空白の問題を解決する方法。表示:インラインブロック要素。
表示: inline-block 要素の間に余分な空白が存在します。これは inline-block 自体の特性です。
厳密に言えば、これはバグではありません。display:inline-block 要素間の余分な空白を解決するための関連記事: http://www.jb51.net/ css/76707.html

以上がCSS表示インラインブロック互換性問題の書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。