インラインブロックのC3ピット

最近、CSSがピットを強化して、今日のインラインブロックを共有して検討し始めました

インラインブロックは、多くの人々がある可能性があります。エリアのレイアウトに慣れていない多くの人々は、フレックスやfloatを使用していますが、互換性について、人々は非常に疑いを超えて満足し、それが浮動互換性がありますが、明確なフロートを感じるフレックスは非常に強力ではありませんされています非常に面倒、ここで私は、私たちのように、いくつかの大規模なサイトでは午前segmentfaultナビゲーション表示とホームページのレイアウトは、いくつかの小さな問題は、まず最初の、そこにある波をロールアップすることができますインラインブロックインラインブロック、ですが、急に見つけPOコード

<div style="background-color:green">
      <div style="width:40px;height:30px;background-color:red;">

      </div>
      <div style="width:40px;height:30px;background-color:red;">

      </div>
      <div style="width:40px;height:30px;background-color:red;">

      </div>
</div>

我々はインラインブロックレイアウトを取った。この時、不思議なことが起こります

<div style="background-color:green;">
      <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>
      <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>
      <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>
    </div>

それが並んでなければなりませんので、3つのdiv要素は、インライン要素となりましたので、並んで3つのdiv側の元、しかし....は、
ここでは2つの問題がありました：

間隔は、divの間で発生します
4PXは、親と子のdiv div要素間間隔

そこにある理由はここで、素子間のインライン・ブロック・レベルのレンダリング、行間隔がケースまたはスペースで区切らに表示されますので、このような問題があるのです

divの間の間隔を解決する方法

ここで私は、この方法は、設定マージン右にあるしようとした、負であります

<div style="background-color:green">
      <div style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px">

      </div>
      <div style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px">

      </div>
      <div style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px">

      </div>
    </div>

ここでは、第2及び第3のノー間隔、子と親のdivは、私たちの問題を説明するためにスペースをDIVないながら第一および第二のdiv divのは、まだ、1ピクセルの距離を持って見ることができ、ここではありません

私が参照してください張Xuxinブログの神は大いに賞賛このアプローチは最高だと思います。

このCSSプロパティを追加するには、親のdiv

font-size:0
-webkit-text-size-adjust:none;

POコード

<div style="background-color:green;font-size:0;-webkit-text-size-adjust:none;">

        <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>

        <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>

        <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>

その後、別の問題があり、あるもの-webkit-テキストサイズ調整????

WebKitのコアブラウザ（クローム）の、中国語フォントサイズが小さい12ピクセルよりもCSSで定義されて、まだブラウザを使用して12ピクセル、その後、あなたは-webkit-テキストサイズ調整し使用することができます：なし。

ハハ、そう私たちの問題は解決されます

参照：インラインブロックの下で互換性と結論記事
> -
IE6、IE7は、インラインブロックを認識しないが、ブロック要素をトリガすることができます。その他の主要なブラウザはインラインブロックをサポートしています。十分だと、ie6,7はまあ、あなたが知っている理由は考慮していません...

最近、CSSがピットを強化して、今日のインラインブロックを共有して検討し始めました

divの間の間隔を解決する方法

このCSSプロパティを追加するには、親のdiv

WebKitのコアブラウザ（クローム）の、中国語フォントサイズが小さい12ピクセルよりもCSSで定義されて、まだブラウザを使用して12ピクセル、その後、あなたは-webkit-テキストサイズ調整し使用することができます：なし。

おすすめ