我注意到 Chrome 和 Safari (Windows) 等 Web-kit 浏览器倾向于将 em 值四舍五入到最接近的像素，而 Firefox、IE、?歌剧？可以使用子像素值。这通常不是什么大问题，但是当我使用 em 精确对齐字母间距或使用文本阴影在不同的客户端分辨率下保持一致的效果时，这让我很头疼。看看下面的测试用例。
你会看到，在 FF 中，即使是最小的字母仍然有阴影，而 Chrome 将 em 值向下舍入为零，前两段没有阴影。
编辑 这与单位无关。如果将 0.03em 替换为 0.9、0.8、0.7 .. px FF 将显示越来越小的阴影，而当 Chrome 低于 1px 时它突然什么都不显示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="bg" xml:lang="bg" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">body {font-size: 18px;} p {color: cyan; text-shadow: -0.03em -0.03em 0 rgb(0, 0, 0);}</style>
</head>
<body>
<p style="font-size:1em">No Shadow Test</p>
<p style="font-size:1.5em">No Shadow Test</p>
<p style="font-size:2em">Test</p>
<p style="font-size:2.5em">Test</p>
<p style="font-size:3em">Test</p>
<p style="font-size:3.5em">Test</p>
<p style="font-size:4em">Test</p>
<p style="font-size:4.5em">Test</p>
<p style="font-size:5em">Test</p>
</body>
</html>
最佳答案
我首先建议您使用 ex units对于 y 坐标和高度值，作为字体可能有一个单独的 x-heights .这可能有助于对您有利的曲线舍入误差，但可能不会。最坏的情况是它至少对字体本身是准确的。
其次，不幸的是，我在规范中找不到任何说明浏览器在这种情况下应该做什么的引用资料，这就是我们看到差异的原因？如果我错了，您可以随时向 webkit 团队提交错误？
就解决方案而言，我只能建议您在这种情况下确定最佳路径。可以将其视为类似于不支持 text-shadow 的 IE。如果舍入失败，则不会出现。然后根据这个立场来决定你的设计。
我个人的做法是将像素用于我知道可能存在舍入误差的事物，例如阴影和边框。
关于css - Webkit 和子像素值，解决方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5655697/