Question

我在浏览器中缩小页面时遇到了麻烦。

这是一个简单的页面，主体宽度为970px，左右分为2个部分。左边一个是300px并向右浮动，边距右10px，右边一个是660px，向右浮动。当我放大或缩小时，这是可以的。

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

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

Answer 1

要为布局提供一定的灵活性，请使用div的百分比宽度，并按照之前的答案中的建议左右浮动，但不要设置边距。允许边距为剩余空间。使用完全相加100％的精确宽度或百分比值，由于Shomz解释的原因，布局会在一个或多个浏览器中中断。

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

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

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

Answer 2

HTML不喜欢使用小数像素数，这正是缩放时所发生的事情 - 所有像素大小都在内部划分或相乘（尽管乘法不是真正的问题）。

想一想，它应该如何代表268.2像素？它变得圆润。因此，如果你有许多不可分割的元素，你必然会丢失一些像素，这会导致布局中断。此外，这就是为什么一些缩放百分比比其他缩放百分比更好。