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

Question

简单的测试案例:

http://cssdesk.com/K2xmN

另一个例子:

http://developer.nokia.com/

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

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

为什么会这样？边界未在EM或%中设置,为什么它会缩放？

Answer 1

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

代替

border: 1px solid red;

写

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

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

或者,您可以使用box-sizing:border-box; 一些类似的效果.

Answer 2

这是缩小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宽边框,导致布局中断.