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

问题描述

在浏览器中给出的宽度和高度为不是整数的元素，他们是如何处理？

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

在具体地，

• 在做非整数值四舍五入得到什么阶段？难道他们四舍五入到最接近的整数，或截断他们？


• 当容器的孩子有非整数的尺寸，还能有实例，那里的孩子长度或高度之和不等于父元素？
的内部宽度/高度

• 请提供非整数尺寸得到不同的处理，以基于百分比的尺寸的非整数的结果？


• 有关填充和利润非整体价值是什么？


• 修改 是的它执行此舍入，或者是操作系统的浏览器？如果它的操作系统，这是否创造一个浏览器'认为'项目比他们画区域大环境，以及这是否与其父容器的大小会产生问题？

• 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?
• 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.

要看到一个简单的例子显示，浏览器使用在他们的计算浮点数，创建一个3％的宽度项目并查看其因为它是在调整Chrome开发者工具的计算性能。

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不能由一个象素映射到一个像素中的物理显示器（CRT，传统的LCD）的显示pcisely呈现$ P $。然而，较新的高密度显示使用不同的比率比1-1和这个分数值可以概念性地被用于提供precision更大程度的

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

但到底的什么的浏览器会做这样的数字是不是很predictable。您不能（目前）问一个浏览器，使一箱31.5px广泛，并期望一致，甚至有意义的结果。有些浏览器将截断分数值;其他四舍五入向上/向下。

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.

在什么阶段做非整数值四舍五入得到在继承
  链？

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

大多数/所有的计算都作为浮点数执行，并且可以，甚至浏览器之外的控制，在此过程中晚期可出现任何舍入。例如，一个浏览器可委派其抗锯齿的操作系统组件（如的 IE9确实到Windows的Direct2D和DirectWrite ）。

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过渡可与操作系统和/或硬件加速的紧密集成。这是另一种情况，我认为这是非常有可能的浮点值是由浏览器pserved并传递给底层（S）$ P $。

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

有当容器的孩子有非整数的尺寸，将
  永远是实例，其中儿童的总和长度或高度不
  等于父元素的内部宽度/高度？

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％＆GT; 100％。通常它，直到你尝试做一些更复杂的是没有问题的。有趣的是，试图$ P $当pcisely对齐HTML元素作为动画的一部分，我已经看到了关一个像素的错误。

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.

请提供非整数尺寸得到不同的处理，
  基于百分比的尺寸的非整数的结果？

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?

据各不相同。 <一href=\"http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected\">This旧的答案指出，他们将被截断，但（在Chrome 24）我看倒圆（注意，比如小提琴）。注意我前面大约在同一台机器上的Chrome和Safari之间的差异评论。

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.

我还没有找到如何浮点值应该在所有情况下处理的标准定义。该最接近的相关规范我可以找到关于会谈帆布像素：

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:

• 浏览器绝对带小数像素沟通。


• 实际实施可能会有所不同。


• 某些标准化确实存在。


• 映射到设备的显示可能因素纳入计算。

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