1

幅が 48% で合計水平マージンが 4% の 2 つのブロックが、折り返さないと同じ行に収まらない理由を知っている人はいますか? 次のような簡単なもの：

<div style="width: 500px; margin: 0; padding: 0;">
   <div style="width: 48%; margin: 0 0 0 2%; padding: 0; background-color: red; display: inline-block;">A</div>
   <div style="width: 48%; margin: 0 0 0 2%; padding: 0; background-color: red; display: inline-block;">B</div>
</div>

jsフィドル

それは私を夢中にさせてきました.Firefox、Chrome、IE8で発生します。Windows と Linux。

私の標準のズーム設定では、「幅：47.5％」を使用して同じ行に表示できます。一貫性があればそれで十分ですが、最小ズームでは 47.8%、最大ズームでは 46.5% にする必要があります。そのため、すべてのズームでページ上の他の要素と一貫した空白の配置を取得できません。

最初は単なる丸め誤差だと思っていましたが、ファッジ ファクターはフォント サイズに依存しているように見えるので、それ以上のことが必要です。いずれにせよ、ページを適切に表示する方法を見つけることができると思いますが、なぜそうなっているのかを本当に知りたいのです。今夜は目が覚めます。

4

2 に答える 2

1

余分なスペースを構成しているdiv間の空白です。これらの div はインライン ブロックであるため、周囲の空白がレンダリングされます。

<div class="should_fit">A</div><div class="should_fit">B</div>

http://jsfiddle.net/cMHgE/4/

于 2012-10-19T05:05:24.333 に答える