浏览器如何处理高度和宽度的非整数值？ [英] How do browsers deal with non-integer values for height and width?

问题描述

当为浏览器给定不是整数值的元素的宽度和高度时，如何处理它们？

特别是

• 非整数值？


• 当容器的子元素具有非整数尺寸时，会出现子元素长度或高度的总和不等于


• 提供的非整数维度会以不同于基于百分比的维度的非整数结果处理吗？


• >
是是执行此四舍五入的浏览器，或者是它的操作系统？如果是操作系统，是否创建条件，浏览器的想象项目大于其绘制的区域，这是否会导致父容器的大小问题？

解决方案

断言

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

---

要查看的提示，它使用红色，绿色和蓝色

但是确切地说，浏览器的 您不能（目前）要求浏览器制作一个宽为31.5像素的框，并期望获得一致或甚至有意义的结果。某些浏览器会截断小数值;

子像素渲染通常用于文本，并且在大多数/所有浏览器中都工作得很好，但每个浏览器的实现方式不同，

何时

在什么阶段非绝对值是否在继承
链中四舍五入？

大多数/所有计算都是作为浮点数执行的，任何舍入可能发生在过程的后期，甚至在浏览器的控制之外。例如，浏览器可以将其反锯齿委托给OS组件（例如 IE9对Windows Direct2D和DirectWrite ）。

CSS转换可以与操作系统紧密集成和/或硬件加速。这是另一种情况，我认为浮点值很可能由浏览器保存并传递到底层。

舍入行为/错误

当容器的子项具有非整数尺寸时，
是子项长度或高度的总和不是
等于父元素的内部宽度/高度？

我在旧版本的浏览器作为百分比计算的结果，其中 50％+ 50％> 100％。通常这不是一个问题，直到你尝试做一些更复杂的事情。有趣的是，当试图精确对齐HTML元素作为动画的一部分时，我已经看到由一个像素错误。

百分比与其他单位

提供的非整数维度与基于百分比的维度的
非整数结果的处理方式不同吗？

它们四舍五入到最接近的整数，或截断它们吗？

此较旧的答案表示它们被截断，但是（在Chrome 24中）我看到四舍五入（注意示例小提琴）。请注意我之前对同一台计算机上Chrome和Safari之间的区别的评论。

填充和边距的非整数值如何？ / p>

相同的规则（或其缺少）似乎适用。

我没有找到在所有情况下如何处理浮点值的标准定义。 最相关的规范我可以找到谈论 canvas pixels：

指定坐标不为$时处理像素舍入b $ b正确映射到设备坐标空间不是由这个
规范定义的，除了下面的内容必须导致没有可见的
更改渲染：[... list of conditions ...]

同样，这是一个专门处理 canvas

• 浏览器与小数像素绝对交互。


• 实际的实现会有所不同。

$ b $ b

When browsers are given widths and heights for elements that aren't integer values, how do they deal with them?

In particular,

• At what stage do non-integer values get rounded? Do they round to the nearest integer, or truncate them?
• 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?
• Do provided non-integer dimensions get handled differently to non-integer results of percentage-based dimensions?
• What about non-whole values for padding and margins?
• Edit: Is it the browsers that perform this rounding, or is it the OS? If it's the OS, does that create conditions where the browser 'thinks' items are larger than their painted area, and does that create issues with the sizing of parent containers?

解决方案

Assertion

Browsers are designed to deal with floating point numbers and values less than one pixel.

---

To see a simple example showing that browsers use floating point numbers in their calculations, create a 3% width item and look at its calculated properties in Chrome developer tools as it is resized.

You should see something like this:

"35.296875" can't be precisely rendered by a display that maps one pixel to one pixel in the physical display (CRT, traditional LCD). However, newer high density displays use a different ratio than 1-1 and this fractional value could conceptually be used to provide a greater degree of precision.

Even on low density displays, a fractional value could provide a hint for subpixel rendering, which uses the red, green and blue components of the pixel to make the edges of an object appear smoother than possible with whole pixel values.

But exactly what the browser will do with such numbers isn't very predictable. You can't (currently) ask a browser to make a box 31.5px wide and expect a consistent or even meaningful result. Some browsers will truncate fractional values; others round up/down.

Subpixel rendering is commonly used for text and works quite well in most/all browsers, but each browser implements this differently and there is very little a developer can do to impact how this works.

When

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

Most/all calculations are performed as floating point numbers and any rounding may occur late in the process, or even outside of the browser's control. For example, a browser may delegate its anti-aliasing to an OS component (such as IE9 does to Windows Direct2D and DirectWrite).

CSS transitions may be tightly integrated with OS and/or hardware acceleration. This is another case in which I think it is highly likely the floating point values are preserved by the browser and passed to the underlying layer(s).

Rounding Behavior/Errors

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?

I've seen this in older browsers (IE7) as a result of percentage calculations, where 50% + 50% > 100%. Usually it is not a problem until you try to do something more complicated. Anecdotally, I have seen "off by one pixel" bugs when attempting to precisely align HTML elements as part of an animation.

Percentages vs. other Units

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?

It varies. This older answer states that they are truncated, but (in Chrome 24) I see rounding (note the example fiddle). Note my earlier comment about the differences between Chrome and Safari on the same machine.

What about non-whole values for padding and margins?

The same rules (or lack thereof) appear to apply.

Standards

I haven't found a standard definition for how floating point values should be handled in all cases. The closest relevant spec I can find talks about canvas pixels:

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...]

Again, this is from a section dealing specifically with canvas, but it does insinuate:

• Browsers absolutely interact with fractional pixels.
• Actual implementations will vary.
• Some standardization does exist.
• Mapping to the device's display may factor into the calculation.

这篇关于浏览器如何处理高度和宽度的非整数值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！