Html 缩放改变设计布局

Zoom changes the design layout

提问by Ron

I am working on a new website, which should be "perfect" - compatible with ie6+, ff, chrome, opera & safari.

我正在开发一个新网站，它应该是“完美的”——与 ie6+、ff、chrome、opera 和 safari 兼容。

I made it compatible with all those browsers but there's one problem I cant handle - when changing the zoom, all the layout become disordered.

我使它与所有这些浏览器兼容，但有一个我无法处理的问题 - 更改缩放比例时，所有布局都变得混乱。

Sample fiddle with the problem: http://jsfiddle.net/pdQrQ/1/

解决问题的示例：http: //jsfiddle.net/pdQrQ/1/

In Chrome (14.0.835), FF (7.0.1) & IE9, when zooming out - the top right box size is changing (atleast it looks like it) and then it is not right aligned with the box below.

在 Chrome (14.0.835)、FF (7.0.1) 和 IE9 中，缩小时 - 右上角的框大小正在变化（至少看起来像），然后它没有与下面的框右对齐。

Edit:
I know what's the cause - the border!

编辑：
我知道是什么原因 - 边界！

Explanation: the zoom function on every browser changing the width/height of the div but not the border size therefore it cause this glitch/float. if I remove the border everything works perefct.

说明：每个浏览器上的缩放功能都会改变 div 的宽度/高度而不是边框​​大小，因此它会导致此故障/浮动。如果我删除边框一切正常。

but I want to use border or else my design will be much uglier.

但我想使用边框，否则我的设计会更丑。

How can I fix?

我该如何解决？

Thanks!

谢谢！

回答by Chris

My best guess for why is that this is due to rounding errors as it scales down. For example if you imagine a box which is 250px wide and contains two boxes side by side that are 125px wide each. Clearly these fit side by side. If you zoom out so that you are at half size then the outer box will be 125px and the inner ones 62.5px each which rounds up to 63px half pixels are as small as you get). These two now come to a total width of 126px so no longer fit side by side and one would have to go under the other.

我对原因的最佳猜测是，这是由于按比例缩小时的舍入误差。例如，如果您想象一个 250 像素宽的盒子，并包含两个并排的盒子，每个盒子的宽度为 125 像素。显然，这些并排放置。如果您缩小到一半大小，那么外框将为 125 像素，内框将为 62.5 像素，每个四舍五入为 63 像素，半像素与您得到的一样小）。这两个现在的总宽度为 126 像素，因此不再并排放置，一个必须放在另一个下方。

This is basically the principle you have at work here I think. The best solution that I can see would be to make the two side by side boxes narrower and float one to the right so that your right border is unbroken. this may mean a slightly bigger gap down the middle but that gap can hopefully absorb rounding errors as you zoom out...

我认为这基本上就是你在这里工作的原则。我能看到的最佳解决方案是使两个并排的框变窄，并将一个向右浮动，这样您的右边框就不会被破坏。这可能意味着中间的间隙稍大，但是当您缩小时，该间隙有望吸收舍入误差......

Edit:

编辑：

As you have noted the borders are the main thing causing confusion. They can be taken off of the outer containers and put on a nested container designed just to add borders.

正如您所指出的，边界是造成混乱的主要因素。它们可以从外部容器上取下，放在一个专门为添加边框而设计的嵌套容器上。

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

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

The above is a fiddle (based on yours) which creates inner DIV tags that contain the border while the floated containers have no border at all. This now seems robust enough to work in IE8, FF7.0.1 or Chrome 14.0.835.202.

上面是一个小提琴（基于你的），它创建包含边框的内部 DIV 标签，而浮动容器根本没有边框。这现在看起来足够强大，可以在 IE8、FF7.0.1 或 Chrome 14.0.835.202 中工作。

The things changed were adding the div to the HTML and swapping some classes around between it and its parent. There was a new innercontainer class that sets the height and width to 100% to ensure it fills the containing box (and thus the borders are where they are wanted. Also I changed the width of the bottom box so that it lined up correctly.

改变的事情是将 div 添加到 HTML 并在它和它的父级之间交换一些类。有一个新的 innercontainer 类将高度和宽度设置为 100% 以确保它填充包含框（因此边框是需要的地方。我还更改了底部框的宽度，使其正确排列。

Let me know if this does you.

如果这对你有帮助，请告诉我。

回答by Oneezy

The best method for doing this now is "box-sizing:border-box",

现在最好的方法是“ box-sizing:border-box”，

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

Fiddle:http://jsfiddle.net/oneeezy/pdQrQ/113/

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