html - 带边框的 chrome、IE 等中的缩小错误？

Question

简单的测试用例:

http://cssdesk.com/K2xmN

另一个例子:

http://developer.nokia.com/

问题:当您将缩放页面更改为 90% 时，边框变为 1.111(75% 时为 1.333)并破坏布局。

在诺基亚网站上，您可以看到顶部容器破裂，因为没有剩余空间。在 CSSDesk 测试用例中，如果您检查计算的样式，您可以看到边框宽度变高了。

为什么会这样？ EM 或 % 中未设置边框，为什么会缩放？

Answer 1

原因已经解释过了，但我想分享一个我刚刚发现的解决方法:通常你可以用看起来像边框但不增加元素外部宽度的框阴影替换边框:

代替

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;达到类似的效果。