css – 浏览器如何处理高和宽的非整数值?

前端之家收集整理的这篇文章主要介绍了css – 浏览器如何处理高和宽的非整数值?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当浏览器的宽度和高度不是整数值的元素时,它们如何处理它们?

尤其是,

>在什么阶段,非整数值得到四舍五入?它们是否舍入到最接近的整数,或截断它们?
>当容器的子类具有非整数维度时,是否存在子长度或高度的总和不等于父元素的内部宽度/高度的情况?
>提供的非整数维度的提供与基于百分比的维度的非整数结果的处理方式不同吗?
>填充和边距的非整体值如何?
>编辑:是执行这个四舍五入的浏览器,还是操作系统?如果是操作系统,是否创建了浏览器“认为”项目大于其绘制区域的条件,并且会对父容器的大小造成问题?

解决方法

断言

浏览器旨在处理浮点数和小于一个像素的值。

要查看simple example显示浏览器在计算中使用浮点数,请创建3%的宽度项,并在Chrome开发人员工具中调整其大小调整后的属性

你应该看到这样的东西:

“35.296875”不能通过将物理显示器(CRT,传统LCD)中的一个像素映射到一个像素的显示器精确渲染。然而,较新的高密度显示器使用与1-1不同的比率,并且在概念上可以使用该分数值来提供更高的精度。

即使在低密度显示器上,分数值也可以为subpixel rendering提供一个提示,它使用像素的红色,绿色和蓝色分量来使对象的边缘看起来比整个像素值可能更平滑。

但是,浏览器将会如何处理这些数字呢是不是很可预测。您不能(目前)要求浏览器制作一个宽31.5像素的框,并期望一致或甚至有意义的结果。一些浏览器会截断分数值;其他人向上/向下。

子像素渲染通常用于文本,并且在大多数/所有浏览器中运行得很好,但是每个浏览器实现这一点不同,开发人员很少有可能会影响它的工作原理。

什么时候

At what stage do non-integer values get rounded in the inheritance
chain?

大多数/所有计算都以浮点数执行,任何四舍五入都可能在进程的后期发生,甚至在浏览器的控制之外。例如,浏览器可以将其抗锯齿功能委托给OS组件(例如IE9 does to Windows Direct2D and DirectWrite)。

CSS过渡可能与OS和/或硬件加速紧密集成。这是另一种情况,我认为浮点值很可能由浏览器保留并传递到底层。

舍入行为/错误

When a container’s children have non-integer dimensions,will there
ever be instances where the sum of the child lengths or heights not
equal the inner width / height of the parent element?

作为百分比计算的结果,我在旧版浏览器(IE7)中看到过,其中50%50%> 100%。通常这不是一个问题,直到你尝试做一些更复杂的事情。从某种意义上说,当尝试将HTML元素作为动画的一部分精确对齐时,我看到了“一个像素”的错误

百分比与其他单位

Do provided non-integer dimensions get handled differently to
non-integer results of percentage-based dimensions?

Do they round to the nearest integer,or truncate them?

它有所不同This older answer表示他们被截断,但(在Chrome 24中)我看到四舍五入(注意示例小提琴)。请注意我之前关于Chrome和Safari在同一台机器上的区别的评论

What about non-whole values for padding and margins?

同样的规则(或缺乏)似乎适用。

标准

在所有情况下,如何处理浮点值都没有找到一个标准的定义。 closest relevant spec我可以找到关于画布像素的谈话:

The handling of pixel rounding when the specified coordinates do not
exactly map to the device coordinate space is not defined by this
specification,except that the following must result in no visible
changes to the rendering: […list of conditions…]

再次,这是一个专门针对画布的部分,但它确实暗示:

>浏览器绝对与小数像素交互。>实际实现将有所不同。>有些标准化确实存在。>映射到设备的显示可能会导致计算。

原文链接:https://www.f2er.com/css/219209.html

猜你在找的CSS相关文章