缩放改变设计布局
我正在开发一个新网站，它应该是“完美”的 - 与 ie6+、ff、chrome、opera 和 ie6+ 兼容。野生动物园。
我使它与所有这些浏览器兼容，但有一个问题我无法处理 - 当更改缩放时，所有布局都会变得混乱。
解决问题的示例： http://jsfiddle.net/pdQrQ/1/
在 Chrome (14.0.835) 中，FF ( 7.0.1) & IE9，缩小时 - 右上角的框大小正在改变（至少看起来像这样），然后它与下面的框不右对齐。
编辑：
我知道原因是什么了——边界！
说明：每个浏览器上的缩放功能都会更改 div 的宽度/高度，但不会更改边框大小，因此会导致此故障/浮动。如果我删除边框，一切都会完美。
但我想使用边框，否则我的设计会很难看。
我该如何修复？
谢谢！
I am working on a new website, which should be "perfect" - compatible with 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/
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.
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.
but I want to use border or else my design will be much uglier.
How can I fix?
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我对原因的最佳猜测是，这是由于缩小时的舍入误差造成的。例如，如果您想象一个 250 像素宽的盒子，并排包含两个并排的盒子，每个盒子的宽度为 125 像素。显然，这些并排适合。如果缩小到一半尺寸，那么外框将为 125 像素，内框为 62.5 像素，四舍五入为 63 像素半像素，即与您得到的一样小）。这两个现在的总宽度为 126 像素，因此不再并排放置，一个必须位于另一个的下方。
我认为这基本上就是你们在这里工作的原则。我能看到的最好的解决方案是使两个并排的框变窄，并将其中一个向右浮动，这样你的右边框就不会被破坏。这可能意味着中间的间隙稍大，但当您缩小时，该间隙有望吸收舍入误差...
编辑：
正如您所指出的，边框是引起混乱的主要原因。它们可以从外部容器上取下并放在一个旨在添加边框的嵌套容器上。
http://jsfiddle.net/chrisvenus/pdQrQ/6/
上面是一个小提琴（基于你的）创建包含边框的内部 DIV 标签，而浮动容器根本没有边框。现在看来，它足够强大，可以在 IE8、FF7.0.1 或 Chrome 14.0.835.202 中工作。
改变的事情是将 div 添加到 HTML 中，并在它和它的父级之间交换一些类。有一个新的内部容器类，将高度和宽度设置为 100%，以确保它填充包含框（因此边框位于所需的位置。此外，我还更改了底部框的宽度，使其正确排列。
让我知道这是否适合你。
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.
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/
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.
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.
Let me know if this does you.
现在最好的方法是“box-sizing:border-box”，
Fiddle: http://jsfiddle.net/oneeezy/pdQrQ/113/
The best method for doing this now is "box-sizing:border-box",
Fiddle: http://jsfiddle.net/oneeezy/pdQrQ/113/