パーセンテージ ベースのレイアウトに問題があります。ここに私のコードがありますhttp://jsfiddle.net/uHkXH/
Mac で Safari または Opera、Windows で IE7、または iPhone iPad を使用している場合、右側にギャップが表示されます。ただし、4 つのボックスの幅、パディング、マージンは合計で 100% にする必要があります。なぜまだギャップがあるのか 理解できません。
誰かがこの問題を説明し、解決するのを手伝ってくれますか? どうもありがとうございます！
サブピクセル（10進数）の幅を丸めようとする特定のブラウザでの問題です。パーセンテージは自動的にピクセルに変換されます。
jsfiddleの要素のピクセル単位で計算された幅を調べて合計すると、コンテナ要素の幅にはなりません。
ここにいくつかの詳細情報があり ますhttp://css-tricks.com/percentage-bugs-in-webkit/
と
IE CSSのパーセンテージの丸めの問題を回避するにはどうすればよいですか？
と
やあ、
ブラウザが何をするのか正確な詳細はわかりませんが、過去に次のことに気づきました。
幅ピクセルを扱う場合：
Firefoxは125.5ピクセルを126ピクセルに切り上げ、125.4ピクセルは125ピクセルに切り下げます。
Operaは126.9pxを126pxとして扱います（ただし、126.999は127pxとして扱います!!）
IEはすべての小数点を無視し、126.9999pxを126pxとして扱います。
パーセンテージを扱うとき。
Operaは、パーセンテージの小数部分のすべてに注意を払っていないようです。たとえば、33.9％は正確に33％に相当します。したがって、1000px幅の33.333％の3つのフロートの場合、Operaは右端に10pxのギャップを表示します。
Mozillaは、使用されたパーセンテージの小数部分の現在の合計を維持しているようであり、最大で全幅で1ピクセルしかありません。
IEは各部分を個別に切り上げまたは切り下げます。したがって、3つのフロートの場合、3ピクセルが大きすぎて、フロートがドロップする可能性があります。
フロートの落下を防ぐには、つまり、最後のフロートに負の右マージンを適用して、余分なスペースを吸収します。（margin-right：-3px）。
オペラの場合、治療法はありませんが、おそらく最後の要素を必要なスペースに合わせるか、要素を必要以上に大きくして、より大きな右負のマージンを適用します。
これが、ほとんどの人が33％を使用する理由です。これは、状況によっては気付かない場合があるわずかなギャップがあっても、すべてのブラウザに適合することがわかっているためです。（たとえば、背後の要素の背景色によって非表示になる場合があります。）