缩放改变设计布局 [英] Zoom changes the design layout

问题描述

我正在开发一个新网站，它应该是完美的"——兼容 ie6+、ff、chrome、opera &野生动物园.

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.

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

在 Chrome (14.0.835)、FF (7.0.1) 和IE9，缩小时 - 右上角的框大小发生变化(至少看起来像)，然后它与下面的框不正确对齐.

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.

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

I know what's the cause - the border!

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

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.

我该如何解决?

谢谢！

推荐答案

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

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...

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

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/

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

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 添加到 HTML 并在它和它的父级之间交换一些类.有一个新的内部容器类将高度和宽度设置为 100% 以确保它填充包含框(因此边框是需要的位置.我还更改了底部框的宽度，使其正确排列.

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.

这篇关于缩放改变设计布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！