CSS inline-block 属性はさまざまなブラウザと互換性があり、水平方向のギャップの問題を解決します-CSSチュートリアル-php.cn

この章では、ブラウザ間での CSS インラインブロック属性の互換性と、水平方向のギャップの問題の解決策について説明します。困っている友人は参考にしていただければ幸いです。

inline-block 属性説明:

この値を設定すると、オブジェクト自体はインラインオブジェクトとしてレンダリングされますが、オブジェクト内のコンテンツはブロックボックスとしてレンダリングされます。つまり、この値が設定された要素は、ブロックボックスを含めることができるインラインボックス要素と同等です。 IE6 と 7 は inline-block をサポートできますが、彼らにとって、display:inline-block はレイアウトをトリガーするための条件にすぎず、W3C によって指定されたものではありません。ただし、IE のレイアウトを使用して、display:inline-block の効果をシミュレートすることはできます。

さまざまなブラウザ向けのインラインブロック互換ソリューション

2 つのメソッドがあり、どちらも最初に IE のレイアウトをトリガーし、次に、次のように、display:inline を定義してブロック要素自体をインラインオブジェクトとしてレンダリングできるようにします。

1. レイアウトをトリガーできるすべての属性のうち、position:absolute と float、および width と height を除いた後、使用できるのは、次のように、display:inline-block だけです。 2 つのディスプレイは連続して配置する必要があります。2 つの CSS ステートメントのみが効果を持ちます。display:inline-block が最初に定義されてから、ディスプレイが inline または block に戻された場合、レイアウトは消えません。

2. 最初の方法は、注意しないと間違いを犯す可能性があります。コードは次のとおりです。

fn-ib{display:inline-block;}fn-i{*display:inline;}

ログイン後にコピー

IE6、7 は inline-block 属性をサポートしていますが、W3C 効果を実装していないため、layout と display:inline を使用して inline-block 属性の効果をシミュレートします。

さて、さまざまなブラウザでインラインブロックの問題を解決する解決策が見つかりました。次の解決策は次のとおりです。さまざまなブラウザで次の例を見てください。

さまざまなブラウザではインラインブロック要素にギャップがあります。これはインライン自体の性質であり、バグではありません CSS inline-block 属性はさまざまなブラウザと互換性があり、水平方向のギャップの問題を解決します

次に、display:inline-block 属性をサポートするブラウザでは、IE67 と IE では、inline 要素と block 要素の両方で、display:inline-block の後に水平方向のギャップが生成されることがわかりました。 (Q) シミュレーション display:inline-block の後に 2 つの状況があります。シミュレーション後のブロック要素にはスペースがありませんが、インライン要素にはギャップがあります。なぜ？ここにもう 1 つの知識ポイントがあります。インライン要素はデフォルトでギャップを持って配置されます。したがって、上記の現象は次のように説明されます:

display:inline-block 属性をサポートするブラウザでは、要素自体は inline 要素と同等であるため、ブロックは設定されていますが、シミュレートされたソリューションにはギャップがあります。要素に display:inline を指定すると、要素を inline 要素と同様に水平方向に配置できますが、block 要素は依然としてブロック要素であり、実際には inline 要素にはならないため、隙間は生じません。

ギャップの根本的な原因は、HTML 内の改行、スペース、タブなどの文字によって空白文字が生成されることです。

インラインブロック間の水平方向のギャップの問題の解決策

上記で、ギャップの根本原因は HTML 内の改行、スペース、タブなどの文字であることがわかったので、タグとタグを配置します間のスペースをなくしても問題ないでしょうか？コードは次のようになります:

HTML コードは次のとおりです:

fn-ibz{display:inline-block;*display:inline;*zoom:1}

ログイン後にコピー

レンダリング:

インラインブロック間のギャップの問題を解決するために DOM 構造を変更します CSS inline-block 属性はさまざまなブラウザと互換性があり、水平方向のギャップの問題を解決します

上記のデモコードを処理しましたので、見てみましょう見てください。クリアランスが不十分です。しかし、ここに問題があります。

それが静的である場合、これをバックグラウンドで直接生成した場合はどうなるでしょうか?あるいは、将来的には、メンテナンス担当者がコードがこのように書かれているのを見て、元に戻すことになるでしょう。したがって、CSS を使用して問題を解決することが依然として最良の方法です。この状況を初めて見たとき、私の最初の反応は、ギャップの根本原因を知った後、ネガティブマージン法では問題は解決できるものの、問題を解決することはできないと感じました。隙間の原因はHTMlの文字、スペース、タブなどの改行であり、フォントサイズなどの属性が変わると隙間も変化します。したがって、CSS を使用して文字サイズを制御し、文字サイズを見つけることができます。そこで、YUI3 のソリューションを参照すると、次のコードが得られました:

<div class="parent">
    <strong class="fn-ibz">内联元素</strong><strong class="fn-ibz">
    内联元素</strong><strong class="fn-ibz">
    内联元素</strong><strong class="fn-ibz">
    内联元素</strong>
</div>
<div class="parent">
    <div class="fn-ibz">块元素</div><div class="fn-ibz">
    块元素</div><div class="fn-ibz">
    块元素</div><div class="fn-ibz">
    块元素</div>
</div>

ログイン後にコピー

Rendering:

CSSinline-block gap solution CSS inline-block 属性はさまざまなブラウザと互換性があり、水平方向のギャップの問題を解決します

次に、コードの各行の役割を分析します:

font-size の役割: もちろん文字によって引き起こされるので、その font-size を 0 に設定し、要素内の font-size を元のサイズに戻します。 IE6、7、および下位バージョンの Chrome および Safari を使用するその他のブラウザを除き、インラインブロックのギャップはこのステップで消えます (下位バージョンの Chrome では、font-size:0 を設定した後にテキストを自由に拡大および縮小することができないため、推奨)
word-spacing の役割: IE6、7、および IE (q) モードでは、常に 1px の間隔があり、word-spacing:-1px を使用してそれを解決します (単語間の距離)は英語でのみ役立ちます。中国語には単語の概念がありません)、要素を通常の状態に戻します。もちろん、margin:0 0 0 -1px; を使うことも可能です（コードが少ないような気がします…）
letter-spacing の役割: chrome と Safari の低バージョンのみが残っています。文字間隔は文字の間隔、フォントサイズ、フォントファミリー、さらにはブラウザによっても異なりますので、「文字間関係データ表」のデータに従って設定してください。 -間隔とフォントサイズ/フォント」を選択すると、隙間を解除できます。次に、文字間隔と単語間隔が一緒になると問題が発生しやすいため、 *letter-spacing:normal; というコードを追加しました。
vertical-align:top の役割: 最後のものはギャップとは関係ありません。vertical-align:top の設定は、インラインブロック要素を上部のベースラインに揃えることです。 vertical-align 属性は、inline 要素および inline-block 要素でのみ有効です。

インラインブロックの利点

インラインブロックレイアウトはフローティングレイアウトよりもブラウザリソースを節約することは言うまでもありませんが、フローティングレイアウトを放棄してインラインブロックレイアウトを採用する必要があります（そして公式Webサイトはそうではありません）この発言）結局のところ、ものの見た目には意味があり、フローティングレイアウトは最も認知されたレイアウト方法でもあります。繰り返しますが、具体的な状況を詳細に分析すると、フローティングレイアウト構造の方が明確ですが、たとえインラインブロックレイアウトが実際には最小限のリソースであっても、インラインブロックを使用し、多くの冗長コードを追加する必要があります。 -消費は伝説的ですが、HTML コードの増加によりリソースも消費されるのではありませんか?

あったとしても、大きくないと思います。したがって、絶対配置を使用する場合は、絶対配置を使用してください。フローティングを使用する場合は、インラインブロックを使用したほうが問題を解決できる場合は、大胆に使用してください。結局のところ、インラインブロックには、フローティングおよび絶対配置と比較して、いくつかの利点があります。