在 Chrome、Safari 和 Firefox 上以不同方式呈现内联块和行高答案

【问题标题】：Inline-block and line-height rendering differently on Chrome, Safari and Firefox在 Chrome、Safari 和 Firefox 上以不同方式呈现内联块和行高
【发布时间】：2013-10-25 11:42:29
【问题描述】：

我的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（正确）
铬（未正确对齐）
Firefox（不正确对齐）

我觉得很奇怪，尤其是 Chrome 和 Safari 的渲染方式不同。这里可以做些什么来使垂直对齐回到与普通文本相同的基线？

【问题讨论】：

你试过vertical-align:middle吗？
是的。当我这样做时，Chrome 和 Firefox 工作，但 Safari 呈现太低：cloud.coneybeare.net/S9LQ

标签： html rendering css

【解决方案1】：

您也可以使用vertical-align: middle; 代替行高。

【讨论】：

当我这样做时，Chrome 和 Firefox 工作，但 Safari 渲染太低：cloud.coneybeare.net/S9LQ
尝试使用 display table-cell 代替 inline-block;
table-cell 强制换行
这是一个活生生的例子：matt.coneybeare.me/…
虽然它没有解决问题，但它做得更好，因为 Safari 渲染略低一些更好，并且比 chrome 大规模对齐失败影响的观众更少

【解决方案2】：

也许不是同一个问题，但我最近发现在 display: inline-block 元素上，使用 line-height 会导致 Safari 和 Chrome 以不同的方式对齐事物。在我的情况下，添加 vertical-align: middle 会导致它们至少以相同的方式对齐事物，从而允许我使用 line-height 来正确定位事物。

【讨论】：