Html Chrome、Safari和Firefox上的内联块和线高度渲染不同

I样式

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;
 }

下面是它在屏幕上的渲染方式

• 狩猎（正确）
  
• 镀铬（未正确对齐）
  
• Firefox（未正确对齐）
  

---

我觉得很奇怪，尤其是Chrome和Safari的渲染方式不同。如何将垂直对齐恢复到与普通文本相同的基线？

您也可以使用

垂直对齐：中间而不是行高。
可能不是同一个问题，但我最近发现在
显示：inline block
元素上，使用
行高会导致Safari和Chrome以不同的方式对齐。
在我的情况下，添加
垂直对齐：中间
会使它们至少以相同的方式对齐对象，允许我使用线条高度来正确定位对象。
您是否尝试过
垂直对齐：中间
？是的。当我这样做的时候，Chrome和Firefox工作，但是Safari渲染得太低：当我这样做的时候，Chrome和Firefox工作，但是Safari渲染得太低：cloud.coneybeare.net/S9LQtry使用显示表格单元格而不是内联块；table cell强制使用一条新的线条这里是一个活生生的例子：虽然它没有解决问题，但它使问题变得更好，因为稍微低一点的Safari渲染效果更好，影响的观众也比chrome的更少