一尘不染

百分比CSS布局中丢失的像素在哪里?[重复]

css

可以说我有一个带有6个DIV的设计,这些DIV浮动了16.666%的宽度。因此,文档大小分为6个部分。

现在,如果我的文档大小为620像素,则每个部分为103.333像素。由于我不知道可以显示部分像素的屏幕:)我想知道浏览器如何处理部分像素。

调整大小时,表明6个DIV保持相同的大小。但这在某些情况下不可能。浏览器如何处理这些部分PX值?


阅读 246

收藏
2020-05-16

共1个答案

一尘不染

例如,如果您使用的是%宽度,而确切的宽度应为103.333px,则浏览器必须决定如何显示该宽度。

我特别喜欢约翰·雷西格(John Resig)/戴维·巴伦(David Baron)的解释,为什么这甚至是一个问题:

我与一些Mozilla开发人员进行了交谈,David Baron很好地解释了这种情况:

我们正在尝试满足一系列不能同时满足的约束 (证明留给读者练习,尽管我可能实际上已经在Bugzilla注释中写过一次):

1.
例如,从容器的一个边缘开始的4个宽度/高度为25%的相邻对象应恰好在另一边缘结束;容器中永远不应有多余的像素,并且由于像素太宽,也不应将其包裹起来

  1. 逻辑上相邻的对象应始终在视觉上接触;由于舍入误差,绝对不应该有像素间隙或重叠像素

  2. 给定相同宽度的对象应占据相同数量的像素

  3. 对象边界应始终(在视觉上)别名为显示中的特定像素边界(永远不应模糊)

一个[Mozilla]牺牲通常是(3),除了边界,我们通过更早地将宽度四舍五入到像素边界来牺牲(1)。

2020-05-16