html - 在 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（正确）
  
• 铬（不正确对齐）
  
• Firefox（不正确对齐）
  

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

Answer 1

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

Answer 2

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