在一个CSS宽度的小数点后的位置是尊重?

小开

宽度将四舍五入为像素的整数。

我不知道是否每个浏览器都能四舍五入。当舍入亚像素百分比时，它们似乎都有不同的策略。如果你对不同浏览器中亚像素舍入的细节感兴趣，有一篇关于ElastiCSS的优秀文章。

编辑:出于好奇，我在一些浏览器中测试了@Skilldrick的演示。当使用分数像素值时(不是百分比，它们的工作方式如我链接的文章中所建议的那样)，IE9p7和FF4b7似乎四舍五入到最近的像素，而Opera 11b, Chrome 9.0.587.0和Safari 5.0.3截断小数点后的位置。我倒不是希望他们有什么共同之处……

小开

最佳答案

如果它是一个百分比宽度，那么是的，它是受尊重的:

#outer {
width: 200px;
}


#first {
width: 50%;
height: 20px;
background-color: red;
}


#second {
width: 50.5%;
height: 20px;
background-color:green;
}


#third {
width: 51%;
height: 20px;
background-color:blue;
}

<div id="outer">
<div id="first">&nbsp;</div>
<div id="second">&nbsp;</div>
<div id="third">&nbsp;</div>
</div>

正如Martin所指出的，当你获得分数像素时，事情就会崩溃，但如果你的百分比值产生整数像素值(例如，在示例中200px的50.5%)，你就会得到合理的、预期的行为。

编辑:我已经更新了示例，以显示发生了什么分数像素(在Chrome的值被截断，所以50,50.5和50.6都显示相同的宽度。)

#percentage {
width: 200px;
color: white;
}


#percentage .first {
width: 50%;
height: 20px;
background-color: red;
}


#percentage .second {
width: 50.5%;
height: 20px;
background-color:green;
}


#percentage .third {
width: 51%;
height: 20px;
background-color:blue;
}


#pixels {
color: white;
}


#pixels .first {
width: 50px;
height: 20px;
background-color: red;
}


#pixels .second {
width: 50.5px;
height: 20px;
background-color:green;
}


#pixels .third {
width: 50.6px;
height: 20px;
background-color:blue;
}


#pixels .fourth {
width: 51px;
height: 20px;
background-color:red;
}

<div id="percentage">
<div class="first">50%=100px</div>
<div class="second">50.5%=101px</div>
<div class="third">51%=102px</div>
</div>
<br />
<div id="pixels">
<div class="first">50px</div>
<div class="second">50.5px</div>
<div class="third">50.6px</div>
<div class="fourth">51px</div>
</div>

小开

即使在绘制页面时将数字四舍五入，完整的值也会保存在内存中，并用于后续的子计算。例如，如果你的盒子的100.4999像素的油漆到100px，它的子宽度为50%将计算为。5*100.4999而不是。5*100。以此类推，向更深层次发展。

我创建了深度嵌套的网格布局系统，其中父节点宽度是ems，子节点宽度是百分比，在上游包含多达4个小数点会产生明显的影响。

边缘情况，当然，但要记住。

小开

它们似乎把值四舍五入到最接近的整数;但是我发现chrome,safari和firefox浏览器不一致。

例如，如果33.3%转换为420.945px

chrome和firexfox显示为421px。而 Safari显示为420px，

这似乎chrome和firefox遵循地板和天花板的逻辑，而safari没有。本页似乎在讨论同样的问题

http://ejohn.org/blog/sub-pixel-problems-in-css/

小开

虽然分数像素可能在单个元素上四舍五入(如@SkillDrick演示得很好)。

当元素彼此堆叠在一起(或顶部)时，这一点最明显;换句话说，如果我将400个0.5像素的div并排放置，它们的宽度将与单个200像素的div相同。如果它们都实际上四舍五入为1px(正如查看单个元素所暗示的那样)，我们将期望200px的div是一半长。

这可以在下面的可运行代码片段中看到:

body {
color:            white;
font-family:      sans-serif;
font-weight:      bold;
background-color: #334;
}


.div_house div {
height:           10px;
background-color: orange;
display:          inline-block;
}


div#small_divs div {
width:            0.5px;
}


div#large_div div {
width:            200px;
}

<div class="div_house" id="small_divs">
<p>0.5px div x 400</p>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
;<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<br>
<div class="div_house" id="large_div">
<p>200px div x 1</p>
<div></div>
</div>

小开

元素必须绘制为整数像素，正如其他答案所述，百分比确实是受尊重的。

一个重要的注意是，在这种情况下像素意味着css像素，而不是屏幕像素，因此一个200px的容器和50.7499%的子像素将被四边形到101px css像素，然后被渲染到视网膜屏幕上的202px，以及不 400 * .507499 ~= 203px。

在此计算中，屏幕密度被忽略，并且没有办法将一个元素绘制到特定的视网膜亚像素大小。你不能让元素的背景或边框呈现小于1 css像素大小，即使实际元素的大小可能小于1个css像素，如Sandy Gifford所示。

[*]你可以使用一些技术，如0.5偏移盒影等，但实际的盒子模型属性将绘制到一个完整的CSS像素。