简单的测试案例：
另一个例子：
问题：当您将缩放页面更改为90％时,边框将变为1.111(1.333,75％)并打破布局.
在诺基亚网站上,您可以看到顶部容器中断,因为没有剩余空间.在CSSDesk测试用例中,如果检查计算出的样式,则可以看到边框宽度更高.
为什么会这样？边界未在EM或％中设置,为什么它会缩放？
解决方法
这是缩小1px边框问题的一个假象.为了说明发生了什么,我修改了你的测试用例以包括zoom：0.5;
在css： http://cssdesk.com/zn4Lx
在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宽边框没有空间,导致布局破损.
