Chrome，Safari和Firefox的内联块和行高渲染方式不同(Inline

Chrome，Safari和Firefox的内联块和行高渲染方式不同(Inline-block and line-height rendering differently on Chrome, Safari and Firefox)

我将code标签设置如下：

code { display: inline-block; white-space: no-wrap; background: #fff; font-size: .8em; line-height: 1.5em; color: #555; border: 1px solid #ddd; -webkit-border-radius: 0.4em; -moz-border-radius: 0.4em; -ms-border-radius: 0.4em; -o-border-radius: 0.4em; border-radius: 0.4em; padding: 0 .3em; margin: -1px 0; overflow: hidden; background-clip: padding-box; -webkit-background-clip: padding-box; }

以下是它的呈现方式

Safari（正确） Chrome（错误对齐） Firefox（错误对齐）

我发现奇怪的是，Chrome和Safari的呈现方式不同。 在这里可以做什么来使垂直对齐回到与普通文本相同的基线？

I style code tags as follows:

code { display: inline-block; white-space: no-wrap; background: #fff; font-size: .8em; line-height: 1.5em; color: #555; border: 1px solid #ddd; -webkit-border-radius: 0.4em; -moz-border-radius: 0.4em; -ms-border-radius: 0.4em; -o-border-radius: 0.4em; border-radius: 0.4em; padding: 0 .3em; margin: -1px 0; overflow: hidden; background-clip: padding-box; -webkit-background-clip: padding-box; }

and here is how it renders on

Safari (correct) Chrome (incorrectly aligned) Firefox (incorrectly aligned)

I find it strange especially that Chrome and Safari are rendering differently. What can be done here to bring the vertical alignment back to the same baseline as the normal text?

最满意答案

你也可以使用vertical-align: middle; 而不是行高。

you can also use vertical-align: middle; instead of line-height.