缩放改变设计布局答案

【问题标题】：Zoom changes the design layout缩放改变设计布局
【发布时间】：2011-12-11 17:26:12
【问题描述】：

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

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

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

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

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

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

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

我该如何解决？

谢谢！

【问题讨论】：

您可能想从这里开始stackoverflow.com/questions/1713771/…，看看您是否可以根据逻辑/物理 DPI 比率更改布局。如果你想出一个更优雅的方式，如果你发布它会很棒。
这个问题太宽泛了。这就像说，我造了一辆汽车，但它不启动，为什么不呢？使用 css 代码发布基本的 html 布局。但是，如果您想支持 ie6+ 和所有其他浏览器，问题的“完美”部分几乎是不可能的。
有问题的页面的代码示例或链接会很有用。还详细说明在所有浏览器中放大时是否损坏等。
这取决于你所说的“无序”是什么意思。据我所知，浏览器中的“缩放”功能并不是真正的缩放，而只是影响文本的大小。这意味着您的文本与其他任何内容（包括所有“框”格式）之间的关系将发生变化，因此整体布局将有所不同。
- 我添加了更多信息和示例链接。 @Colin-Fine，我知道“缩放”功能不是真正的缩放，但它存在并且人们使用它。我想知道如何解决它....

标签： html browser cross-browser zooming

【解决方案1】：

我最好的猜测是，这是由于缩小时的舍入误差。例如，如果您想象一个 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% 以确保它填充包含框（因此边框是它们想要的位置。我还更改了底部框的宽度，以便它正确排列。

如果你这样做，请告诉我。

【讨论】：

浮动：右；不能解决问题。问题是由边界引起的。我不能按照这个原则工作，因为它会破坏我的设计（通过让它变得完全不同）。
在我的答案中添加了一个新部分，处理如何将边框放在内部 div 上，以利用它没有边框但您想保留它们的事实。现在外部 div 处理布局，内部处理边框等。
我之前尝试过这个解决方案，但由于某种原因它没有用，现在可以了。不知道为什么-谢谢！。
我现在在 IE6+、FF 7.0.1、Chrome 14.0.835.202 和 Safari 5.0.5 中对其进行了测试，除了 IE6 之外，它在所有这些版本中都能完美运行。在IE6中，顶部宽度是750，而bot是752。我不知道如何解决它......
@Ron: 可能你还得为底部的 div 做带边框的 div。听起来底部可能是 750 宽度和每边 1 像素的边框。也对它做同样的把戏，看看效果如何。不幸的是，我没有 IE6 可以测试。

【解决方案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/

【讨论】：

这确实解决了我的问题。我还发现了一些关于它的有趣文章。其中一篇文章是这样的：paulirish.com/2012/box-sizing-border-box-ftw 当然多年后，随着 CSS3 的官方“发布”，不再需要前缀了。
按预期工作 - 没有理论只有实际。不错