在CSS的字体大小属性中使用分数em

Question

假设我已经定义了以下CSS规则：

.className {
font-size:0.89em;
}

我的问题是，当我使用'em'单位时，我能在分数中走多深，以便浏览器实际支持它，并使字体大小对于em值的微小分数变化呈现出不同的效果？

- ahmd0

---

它们似乎很深入，我没有任何确切的数字可以提供，但是可以查看类似http://pxtoem.com/的网站并进行试验。你会发现它们可以做任何事情。我曾经看到过像0.631111111111111em这样的ems设置，并且它们起作用了。不过，与0.63em相比，它们是否在可见上有所不同是不太可能的。 - Doozer Blake

非常好。而且似乎大多数主流浏览器都会以不同的字体大小呈现em值的最小变化。为什么不将其发布为答案，我会将其标记为正确答案。 - ahmd0

最终，最小的缩放单位是1像素，对吧？ - JohnB

@JohnB 好吧，我不是在谈论那种极端情况)) 对我来说，我很好奇，比如说0.89em是否会与0.88em等有所不同。 - ahmd0

看起来IE9和10将小数四舍五入为仅两位小数。因此，1/12em将四舍五入为0.08em，0.08em * 12px / em变为0.96px而不是1px。这不应该成为问题，因为0.96px应该呈现为1px，对吧？鲍勃，你错了。IE对这个问题的答案显然是“有时候我会，有时候我不会”。 - Adrian Schmidt

Answer 1

JohnB是正确的。无论我们使用什么尺寸单位，我们仍然以像素为单位进行渲染，而ems的微小变化不会改变显示大小：

例如，对于最初显示高度为20px*的文本，当添加规则使其高度为原始高度的.99em时，我们可以看到没有实际变化：

20 * 0.99 = 19.8 

浏览器无法显示0.8像素，因此（假设它会四舍五入），它仍将以20px高度显示。

尽管看起来浏览器并不总是按预期进行四舍五入：

http://meyerweb.com/eric/thoughts/2010/02/10/rounding-off/

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

*对的，我知道20像素的字体大小并不总是以20像素的大小显示！

- james6848

Answer 2

需要翻译的内容：

需要记住的是，像所有浮点数一样，分数em值容易出现舍入误差。

我在设置媒体查询边界时发现了这一点，其中一个最大宽度与另一个最小宽度相差0.00001em，结果被四舍五入并且两个查询都被激活。将差异更改为0.001em后，查询按预期工作，独占式地。

- Adam Jagosz