html - 内联 block 和行高在 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; 代替 line-height。