HTML – 缩小Chrome,IE等带边框的错误？
发布时间：2020-12-14 19:35:53 所属栏目：资源 来源：网络整理
导读：简单的测试案例： http://cssdesk.com/K2xmN 另一个例子： http://developer.nokia.com/ 问题：当您将缩放页面更改为90％时,边框将变为1.111(1.333,75％)并打破布局. 在诺基亚网站上,您可以看到顶部容器中断,因为没有剩余空间.在CSSDesk测试用例中,如果检查
|
简单的测试案例：
http://cssdesk.com/K2xmN 另一个例子： http://developer.nokia.com/ 问题：当您将缩放页面更改为90％时,边框将变为1.111(1.333,75％)并打破布局. 在诺基亚网站上,您可以看到顶部容器中断,因为没有剩余空间.在CSSDesk测试用例中,如果检查计算出的样式,则可以看到边框宽度更高. 为什么会这样？边界未在EM或％中设置,为什么它会缩放？ 解决方法
这是缩小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.22222111px,渲染边框宽度将为1px宽,但由于布局中大于1px的所有其他宽度也缩小了约90％,1px宽边框没有空间,导致布局破损. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |