webdevqa.jp.net

ズームはデザインレイアウトを変更します

私は新しいウェブサイトに取り組んでいます。これは「完璧」でなければなりません-ie6 +、ff、chrome、opera&safari。

これらすべてのブラウザと互換性を持たせましたが、処理できない問題が1つあります。ズームを変更すると、すべてのレイアウトが乱れます。

問題のあるフィドルの例: http://jsfiddle.net/pdQrQ/1/

Chrome(14.0.835)、FF(7.0.1)、IE9の場合、ズームアウトすると、右上のボックスのサイズが(少なくともそれと同じように)変化し、正しくない下のボックスと揃えます。

編集:
原因は何ですか-国境です!

説明:すべてのブラウザーのズーム機能がdivの幅/高さを変更しますが、境界線のサイズは変更しないため、この問題が発生します。国境を取り除くと、すべてがうまくいきます。

ボーダーを使用したいのですが、デザインがかなり醜くなります。

どうすれば修正できますか?

ありがとう!

16
Ron

なぜかと思うと、これはスケールダウン時の丸め誤差が原因であると考えられます。たとえば、幅が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クラスがありました(したがって、境界は必要な場所にあります。また、下のボックスの幅を変更して、正しく整列するようにしました。

これで問題が解決するかどうかをお知らせください。

25
Chris

これを行うための最良の方法は、「box-sizing:border-box」、

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


フィドル:http://jsfiddle.net/oneeezy/pdQrQ/113/

11
Oneezy