缩放会更改设计布局

Question

我正在开发一个新的网站,它应该是"完美的" - 与ie6 +,ff,chrome,opera和safari兼容.

我使它与所有这些浏览器兼容但是我无法处理一个问题 - 当改变缩放时,所有布局都变得混乱.

示例摆弄问题:http: //jsfiddle.net/pdQrQ/1/

在Chrome(14.0.835),FF(7.0.1)和IE9中,当缩小时 - 右上角的框大小正在改变(至少它看起来像),然后它与下面的框没有正确对齐.

编辑:
我知道原因是什么 - 边界!

说明:每个浏览器上的缩放功能改变了div的宽度/高度而不是边框​​大小,因此它会导致这个毛刺/浮动.如果我删除边框一切正常perefct.

但我想使用边框,否则我的设计会更加丑陋.

我该怎么办？

谢谢!

Answer 1

我最好的猜测是,这是因为它缩小时会出现舍入误差.例如,如果您想象一个250px宽的盒子,并且包含两个并排的盒子,每个盒子宽125px.显然这些并排.如果缩小以使你处于一半的尺寸,则外框将为125像素,内部的62.5像素,每个像素的半像素最大为63像素,这样就可以了.这两个现在总宽度为126px,因此不再并排放置,而另一个则必须放在另一个之下.

这基本上就是你在这里工作的原则.我能看到的最好的解决方案是将两个并排的盒子缩小并向右浮动一个,这样你的右边界就不会破裂.这可能意味着中间有一个稍微大一点的差距,但是这个差距有望在缩小时吸收舍入误差......

编辑:

正如您所指出的那样,边界是引起混淆的主要因素.它们可以从外部容器中取出并放在设计用于添加边框的嵌套容器上.

http://jsfiddle.net/chrisvenus/pdQrQ/6/

上面是一个小提琴(基于你的),它创建包含边框的内部DIV标签,而浮动的容器根本没有边框.这似乎足够强大,适用于IE8,FF7.0.1或Chrome 14.0.835.202.

改变的是将div添加到HTML并在它和它的父代之间交换一些类.有一个新的内部容器类将高度和宽度设置为100%,以确保它填充容纳盒(因此边框是他们想要的地方.我也改变了底部框的宽度,使其正确排列.

如果你这样,请告诉我.

Answer 2

现在执行此操作的最佳方法是" box-sizing:border-box ",

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

小提琴: http ://jsfiddle.net/oneeezy/pdQrQ/113/