ズームはデザインレイアウトを変更します
私は新しいウェブサイトに取り組んでいます。これは「完璧」でなければなりません-ie6 +、ff、chrome、opera＆safari。
これらすべてのブラウザと互換性を持たせましたが、処理できない問題が1つあります。ズームを変更すると、すべてのレイアウトが乱れます。
問題のあるフィドルの例： http://jsfiddle.net/pdQrQ/1/
Chrome（14.0.835）、FF（7.0.1）、IE9の場合、ズームアウトすると、右上のボックスのサイズが（少なくともそれと同じように）変化し、正しくない下のボックスと揃えます。
編集：
原因は何ですか-国境です！
説明：すべてのブラウザーのズーム機能がdivの幅/高さを変更しますが、境界線のサイズは変更しないため、この問題が発生します。国境を取り除くと、すべてがうまくいきます。
ボーダーを使用したいのですが、デザインがかなり醜くなります。
どうすれば修正できますか？
ありがとう！
なぜかと思うと、これはスケールダウン時の丸め誤差が原因であると考えられます。たとえば、幅が250pxで、幅が125pxの2つのボックスが横に並んでいるボックスを想像してみてください。明らかにこれらは並んでフィットします。半分のサイズになるようにズームアウトすると、外側のボックスは125pxになり、内側のボックスはそれぞれ62.5pxになり、半角63pxに切り上げられるので、できるだけ小さくなります）。これら2つは合計幅が126pxになったため、横に並べることはできなくなり、一方を他方の下に配置する必要があります。
これは基本的にあなたがここで働いている原則だと思います。私が見ることができる最良の解決策は、2つの横並びのボックスを狭くして、1つを右にフロートさせ、右の境界線が途切れないようにすることです。これは、真ん中より少し大きいギャップを意味するかもしれませんが、そのギャップは、ズームアウトしたときの丸め誤差を吸収できると期待しています...
編集：
お気づきのように、境界線は混乱の主な原因です。それらは外側のコンテナーから取り出して、境界線を追加するためだけに設計されたネストされたコンテナーに置くことができます。
http://jsfiddle.net/chrisvenus/pdQrQ/6/
上記はフィドル（あなたのものに基づく）であり、フロートされたコンテナーにはボーダーがありませんが、ボーダーを含む内部DIVタグを作成します。これはIE8、FF7.0.1またはChrome 14.0.835.202。
変更されたのは、divをHTMLに追加し、それとその親の間でいくつかのクラスを交換することでした。高さと幅を100％に設定して、それが含まれるボックスを確実に埋めるように新しいinnercontainerクラスがありました（したがって、境界は必要な場所にあります。また、下のボックスの幅を変更して、正しく整列するようにしました。
これで問題が解決するかどうかをお知らせください。
これを行うための最良の方法は、「box-sizing：border-box」、
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }