Question

简单的测试用例：

http://cssdesk.com/K2xmN

另一个例子：

http://developer.nokia.com/

问题：当您将缩放页面更改为90％时，边框将变为1.111（1.333，75％）并打破布局。

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

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

Answer 1

这是缩小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边框的空间，导致布局破损。

Answer 2

为什么会被解释，但我会分享一个我刚刚发现的解决方法：通常，您可以使用看起来像边框但不添加到元素外部宽度的框阴影替换边框：

而不是

border: 1px solid red;

写

box-shadow: inset 0 0 0 1px red;
width: 102px;
height: 102px;

div的宽度和高度必须相应调整，以适应每边1px的边框现已消失的事实。现在当缩小浏览器仍然会将框阴影视为与边框相同，即它不会收缩到1px以下，但它不会影响元素的宽度，因此布局不会破坏。

或者，您可以使用box-sizing：border-box;一些类似的效果。

Answer 3

Shepard的盒阴影解决方案可能不适用于带有子元素的元素占据其全部空间的元素，因为阴影将被子元素覆盖。

另一种解决方法是使用大于1像素但小于1.5像素的边框宽度。

border-width: 1.3px;

我发现1.3px或1.4px是理想的值，它可以在Chrome和IE11中使用，且缩放比例大于等于75％

缩小chrome，IE等带边框的bug？

3 个答案: