Chromeで1％の損失

私は浮動小数点型のdivで3列のレイアウトを作成しています。私は20pxの詰め物を持つコンテナを持っています。コンテナ内には1つの全角ブロックがあり、その後に3つの列が続き、別の全幅ブロックが続きます。列は左に浮動します。幅：31％、マージン：0 1％。これは最大99％を追加します。全幅ブロックの余白は0 2％0 1％です。 99％にもなります。Chromeで1％の損失

MozillaとIEは完全にすべてをレンダリングしますが、Chromeは全幅ブロックにもう1％追加します。私は計算を理解できません。

あなたは多分見てみることができます：schoolscout.co.uk。

出典

2011-03-25 hypeJunction

は同じ質問に答える本ですか？ http://stackoverflow.com/questions/5115637/evenly-distributed-height-of-child-elements-with-css – ajcw

異なるレンダリングエンジンは、ピクセルのパーセンテージを別々に計算するためです。 John Resigは彼の記事Sub-Pixel Problems in CSSの概要をよく紹介しています。

は画像が含ま間違って行くことができるものの良い例が示しています

両方オペラとSafari [およびその他のWebKitベースのブラウザ、MK]は12ピクセルにすべてのdivの幅を切り捨てます。これにより、すべてのdivの右側に2ピクセルのギャップ（緑に注意）が残ります。あなたのうまく整列したナビゲーションがこれらのブラウザのコンテナの全内容を満たしていない理由を今までに知りたければ、なぜその理由が分かりましたか。プラスの面では、少なくとも、あなたはこれらのコンテナの幅が何であっても同じであることを知っています。あなたのページを見てみると

、これは私が得るものです：

    m  b  p  w  p  b  m total 
Chrome 
column_header 6  1  - 674  -  1 13  695 
column   6  -  - 215  -  -  6  227 
Firefox 
column_header 6  1  - 673  -  1 13  694 
column   6  -  - 216  -  -  6  228

出典

2011-03-25 22:12:06

ありがとうございます。それは私が起こっていたと思ったものです。素敵な修正がありますか？私はレイアウト流体を維持したい...それはWebkitのための別のマージンを定義する意味があると思いますか？ – hypeJunction

@user：総和の合計がワイド列（いくつかのマージンを除く）と同じであればJavaScriptを使ってテストし、それに応じて幅を修正することができます（これは 'onload'と' onresize'で行うことができます）。 –

Chromeで1％の損失

答えて

関連する問題