想象一下这样的 CSS：
.x {
background: blue none;
border-radius: 6px;
}
和 HTML 像：
<div>Words and <span class="x">decorated</span> words</div>
跨度读数“装饰”的高度在不同浏览器之间以及在运行相同浏览器的不同操作系统之间会有很大差异。
有什么办法可以让它保持相同的高度吗？
（我不想移动到内联块或使用完全相同的基线牺牲文本。）
问问题
82 次
2 回答
1
我避免不同高度的经验是设置精确的行高和字体大小
于 2012-05-06T00:32:41.700 回答
0
听起来还有其他原因导致您的问题。我刚刚尝试了一个基本的 html5 文档，其中包含您问题中的摘要，并将 Windows 上的对齐方式与 Chrome、Safari、FF 和 IE 进行了比较。除了 IE9 仅在跨度上方有 1px 的间隙外，它们都呈现完全相同。
授予 Mac 渲染字体与 Windows 不同，我没有在 linux 或 mac 上测试，但是 9px ！！！？？？以下是我要调查的一些事情：
首先，如果您在一个较大的项目中工作，请尝试一个基本的测试文件，这将限制您的变量。
其次，尝试设置显式字体并确保它们存在于所有测试机器上——也许 linux 正在回退到不同的字体。
第三，确保您没有在任何浏览器上放大或使用自定义字体大小浏览器设置（我不久前遇到了这个问题，不知何故我的 IE 被设置为 105% 缩放。）
最后，如果所有这些都失败了，您可能想尝试使用网络字体 (@font-face) 并查看它是否更严格地呈现。
编辑：
代替您评论中的新信息，另一种策略是使用 JavaScript 检查某些屏幕外元素的渲染高度，然后以编程方式相应地调整样式。你可能会得到一个巨大的 FOUC，但你可以使用一个 whiteout div 来最小化这种转变。
于 2012-05-09T22:50:42.210 回答