简单的测试用例：
另一个例子：
问题：当您将缩放页面更改为 90% 时，边框变为 1.111（75% 时为 1.333）并破坏了布局。
在诺基亚网站上，您可以看到顶部容器因空间不足而破裂。在 CSSDesk 测试用例中，如果您检查计算的样式，您可以看到边框宽度变高了。
为什么会这样？边界未在EM或%中设置，为什么会缩放？
问问题
6698 次
3 回答
9
为什么已经解释了，但我想分享一个我刚刚发现的解决方法：通常你可以用一个看起来像边框但不会增加元素外部宽度的 box-shadow 替换边框：
代替
border: 1px solid red;
写
box-shadow: inset 0 0 0 1px red;
width: 102px;
height: 102px;
必须相应地调整 div 的宽度和高度，以适应现在每边的 1px 边框已经消失的事实。现在，当缩小浏览器时，box-shadow 仍然会和边框一样处理，即它不会缩小到 1px 以下，但它不会影响元素的宽度，因此布局不会中断。
或者，您可以使用 box-sizing: border-box; 达到一些类似的效果。
于 2014-07-17T10:37:21.193 回答
6
这是缩小 1px 边框问题的产物。为了说明会发生什么，我修改了您的测试用例以包含zoom: 0.5;
在 css 中：http ://cssdesk.com/zn4Lx
请注意，如果您检查计算的样式，边框宽度将为 2px。发生的情况是 Chrome 尝试缩小元素，但是在缩放之后，边框仍然必须为 1px 宽才能保持可见（毕竟 1px 是计算机屏幕上可以呈现的最小单位，如果边框宽度缩小到小于 1.0 的浮点数，会向下舍入到 0px 并消失）。但是为了证明缩放的合理性，它通过调整初始宽度来过度补偿以满足方程
new_width = old_width * scale
在此示例中，由于new_width = 1px和scale = 0.5，它重新计算old_width为2px。但请注意，缩放后呈现的边框的实际宽度仍为1px.
因此，在您的示例中，调整后的旧宽度约为1.11111111px，渲染的边框宽度将1px变宽，但由于布局中大于 1px 的所有其他宽度也已按比例缩小了约 90%，因此没有空间对于 1px 宽的边框，这会导致布局损坏。
于 2013-10-14T01:06:09.503 回答
2
Shepard 的盒子阴影解决方案可能不适用于具有占据所有空间的子元素的元素，因为阴影将被子元素覆盖。
另一种解决方法是使用大于 1px 但小于 1.5px 的边框宽度。
border-width: 1.3px;
我发现1.3px或1.4px成为理想值，它适用于 Chrome 和 IE11，缩放 >= 75%
于 2019-01-02T09:59:45.333 回答