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

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

inline-block 属性 説明:

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

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

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

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

さまざまなブラウザではインライン ブロック要素にギャップがあります。これはインライン自体の性質であり、バグではありません

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

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

インラインブロック間のギャップの問題を解決するために DOM 構造を変更します

<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>

CSSinline-block gap solution

1. font-size の役割: もちろん文字によって引き起こされるので、その font-size を 0 に設定し、要素内の font-size を元のサイズに戻します。 IE6、7、および下位バージョンの Chrome および Safari を使用するその他のブラウザを除き、インライン ブロックのギャップはこのステップで消えます (下位バージョンの Chrome では、font-size:0 を設定した後にテキストを自由に拡大および縮小することができないため、推奨)

2. word-spacing の役割: IE6、7、および IE (q) モードでは、常に 1px の間隔があり、word-spacing:-1px を使用してそれを解決します (単語間の距離)は英語でのみ役立ちます。中国語には単語の概念がありません)、要素を通常の状態に戻します。もちろん、margin:0 0 0 -1px; を使うことも可能です（コードが少ないような気がします…）

3. letter-spacing の役割: chrome と Safari の低バージョンのみが残っています。文字間隔は文字の間隔、フォントサイズ、フォントファミリー、さらにはブラウザによっても異なりますので、「文字間関係データ表」のデータに従って設定してください。 -間隔とフォントサイズ/フォント」を選択すると、隙間を解除できます。次に、文字間隔と単語間隔が一緒になると問題が発生しやすいため、 *letter-spacing:normal; というコードを追加しました。

4. vertical-align:top の役割: 最後のものはギャップとは関係ありません。vertical-align:top の設定は、インラインブロック要素を上部のベースラインに揃えることです。 vertical-align 属性は、inline 要素および inline-block 要素でのみ有効です。
   

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

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

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

1. vertical-align と text-align を使用して、垂直、水平、両側、ベースラインなどの配置を実現でき、適応性もあります。

2. 独自の理由により、流動的なレイアウトに特に適しています。高さと幅を固定する必要はありません。

以上がCSS inline-block 属性はさまざまなブラウザと互換性があり、水平方向のギャップの問題を解決しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。