display:inline-block_html/css_WEB-ITnose によって引き起こされるギャップ問題の解決策

Web ページのレイアウトでは、display:inline-block をよく使用します; 利点は、ブロック要素をインライン要素としてレイアウトでき、幅と高さを同時に設定できることです。個人的には非常に便利だと思っているのですが、使いすぎると徐々に問題が発生しませんか？

1.display:inline-block; は IE6/7 と互換性がありません

解決策: display:inline-block;*dsiplay:inline;*zoom:1;

2.display:inline-block; が生成されますギャップ (4px)

原因: 改行またはスペースが特定の位置を占めるため、ギャップが生じます。

解決策:

1. HTML コード内の現在の要素からスペースまたは改行を削除します。および HTML コードの読みやすさに影響を与えるため、承認されていません。

2. 現在の要素の親要素に font-size:0 を設定します。その機能は基本的に方法 1 と同じですが、Chrome ではサポートされていない可能性があります

3. 現在の要素の親要素に文字を設定します。 element -spaceing:-4px; その機能は、テキスト間の水平方向の距離を制御し、テキストが水平方向に重なることを許可し（line-height によりテキストが垂直方向に重なることができます）、スペースまたは改行によって占められるスペースをオフセットします。 。

結論は次のとおりです:
» ブロックレベルの要素をインラインブロックした後、IE6/7 では改行ギャップの問題は発生しませんが、他のブラウザでは問題が発生します
» インラインレベルの要素をインラインブロックした後は、すべてのメインストリームが問題になります。ブラウザには改行がある 文字/スペースのギャップの問題;
» font-size:0 は改行のギャップを削除し、IE6/7 では 1 ピクセルのギャップを残します。これは Chrome では無効ですが、他のブラウザでは完全に削除されます。 -spacing 値を削除可能 すべてのブラウザの改行間隔ですが、Opera ブラウザの下限は 1 ピクセルの間隔で、0 ピクセルになるとリバウンドして改行間隔が元に戻ります。

推奨される解決策:

同時に font-size:0;letter-spaceing:-4px;

を設定します