HTML – 缩小Chrome,IE等带边框的错误?

前端之家收集整理的这篇文章主要介绍了HTML – 缩小Chrome,IE等带边框的错误?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
简单的测试案例:

http://cssdesk.com/K2xmN

另一个例子:

http://developer.nokia.com/

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

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

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

解决方法

@H_404_17@ 这是缩小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宽边框没有空间,导致布局破损.

原文链接:/html/224128.html

猜你在找的HTML相关文章