Question

想象一下CSS：

.x {
  background: blue none;
  border-radius: 6px;
}

和HTML一样：

<div>Words and <span class="x">decorated</span> words</div>

跨度读数'装饰'的高度在不同浏览器之间以及运行相同浏览器的不同操作系统之间会有很大差异。

有没有办法让它达到同样的高度？

（我不想使用完全相同的基线移动到内联块或牺牲文本。）

Answer 1

我避免使用不同高度的经验是设置精确的线高和 font-size

Answer 2

听起来有其他原因导致你的问题。我刚刚尝试了一个基本的html5文档，其中包含了你问题中的snippit，并将Windows上的对齐与Chrome，Safari，FF＆amp; IE浏览器。它们都呈现完全相同，只有IE9只有跨度1px的间隙。

Granted Mac渲染字体与Windows不同，我没有在linux或Mac上测试，但9px !!! ???以下是我要调查的一些事情：

首先，如果您在一个更大的项目中工作，请尝试一个基本的测试文件，这将限制您的变量。

其次，尝试设置显式字体并确保它们存在于所有测试机器上 - 也许linux会回归到不同的字体。

第三，确保你没有放大或在任何浏览器上使用自定义字体大小的浏览器设置（我在一段时间后遇到了这个，我的IE被设置为105％缩放。）

最后，如果所有这些都失败了，您可能想尝试使用网络字体（@ font-face）并查看是否更严格地呈现。

编辑：

代替评论中的新信息，另一种策略是使用JavaScript检查某些屏幕外元素的渲染高度，然后以编程方式相应地调整样式。你可能会得到一个巨大的FOUC，但你可以使用一个whiteout div来减少转变。