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

Question

我按如下方式设置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呈现的方式不同。这里可以做些什么来使垂直对齐回到与普通文本相同的基线？

Answer 1

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

Answer 2

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