浏览器缩小会破坏页面布局答案

【问题标题】：browser zoom out breaks page layout浏览器缩小会破坏页面布局
【发布时间】：2013-11-25 02:52:22
【问题描述】：

在浏览器中缩小页面时遇到问题。

这是一个简单的页面，body 宽度为 970px，分为左右两部分。左边是 300px，向左浮动，margin-right 10px，右边是 660px，向右浮动。放大或缩小时都可以。

但是当我将左侧宽度更改为 298 像素，并将右侧宽度添加为 658 像素时，为两个部分添加 1 像素边框，虽然正常尺寸可以，但是当我缩小（ctrl + 鼠标滚轮向下）到 90% 时，右侧部分下拉并打破布局。详细可以看这里：jsfiddle

<body>
    <style>
    </style>
    <div id='left'>left</div>
    <div id='right'>right</div>
</body>

【问题讨论】：

【解决方案1】：

为了让您的布局具有一定的灵活性，请按照先前答案中的建议为您的 div 使用百分比宽度并左右浮动，但不要设置边距。允许边距是剩余的空间。使用精确的宽度或百分比值加起来正好为 100%，由于 Shomz 解释的原因，布局可能会在一个或多个浏览器中中断。

#left{
    float:left;
    width:30%;
}

#right{
    float:right;
    width:65%;

两个元素之间的间距将与 5% 的边距相同，并且不太可能中断。

【讨论】：

【解决方案2】：

HTML 不喜欢使用十进制像素数，而这正是您缩放时会发生的情况 - 所有像素大小都会在内部进行除法或相乘（尽管相乘并不是真正的问题）。

想一想，268.2像素应该怎么表示呢？它变得圆润。因此，如果您有许多不可分割的元素，您肯定会丢失一些像素，这会导致布局中断。此外，这就是为什么某些缩放百分比比其他缩放百分比效果更好的原因。

【讨论】：

但是当我删除边框，并将左侧宽度设置为 300 像素，右侧宽度设置为 660 像素，左侧边距设置为 10 像素时，无论您如何缩放，页面布局都不会中断。为什么在这种情况下页面布局不中断？
浏览器可能一直保留边框，因为它不能小于1px，所以它保持1px。当所有其他元素缩小时，子元素宽度的总和变得大于容器元素宽度（由于边框和不可整除的数字舍入）导致右侧元素没有足够的空间并将其移动到新行。看看当你“标准化”数字时会发生什么：jsfiddle.net/zSw6r/2