变焦改变了设计布局 [英] Zoom changes the design layout

问题描述

我工作的一个新网站，这应该是完美 - 与IE6 +，FF，铬，歌剧和放大器兼容; Safari浏览器。

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，缩小的时候 - 右上方箱尺寸发生变化（ATLEAST看起来它），然后这是不对的与下面的方框对准

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的宽度/高度，但没有边框大小变焦功能，因此导致此故障/浮动。如果我删除边界一切正常perefct。

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像素宽，包含并排两个箱子一侧是125px宽各。显然，这些配合相映成趣。如果缩小让你的一半大小，然后在外包装盒将是125px和内部的62.5px当你每一个向上舍入到63px半像素小）。这两个现在来126px并排一所以不再适合侧的总宽度将有其他去下。

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.

改变的东西都加入股利HTML和周围交换它与其父之间的一些课程。有，设置的高度和宽度为100％，以确保它填充含有盒（以及因此的边界是在那里它们被需要一个新innercontainer类。此外，我改变了底框的宽度，以便它排队正确

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屋！