如何使填充在 moz 和 webkit 浏览器中看起来相同？

Question

所以我正在开发这些元素并试图弄清楚为什么它们在 moz 和 webkit 浏览器中看起来不同。这是 HTML:

<div>
  <span class="facet-count">2</span>
  <span class="facet-count">4</span>
  <span class="facet-count">16</span>
  <span class="facet-count">256</span>
  <span class="facet-count">65536</span>
</div>

这里是 CSS:

.facet-count {
  padding: 3px 7px;
  background: #0896ea none repeat scroll 0 0;
  border-radius: 20px;
  color: white;
  font-size: 10px;
  font-weight: bold;
  position: relative;
  font-family: "Helvetica Neue";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: grayscale;
}

这是一个 link 的演示：http://codepen.io/obliviga/pen/OMNMra

是否可以应用任何修复程序来使这些方面计数在所有浏览器上看起来都一样？同样，我指的是它们在 Firefox 上的外观。谢谢

Answer 1

身高差可以加上：

line-height: 13px;  
display: inline-block;

文字粗细差异可以试试：

text-rendering: optimizeLegibility;

但通常您无法使 Moz 和 WebKit 显示文本 100% 完全相同。试试 Google 字体。它们比 Helvetica 等内置系统字体更跨浏览器一致。

如何使填充在 moz 和 webkit 浏览器中看起来相同？

How to make padding look the same in moz and webkit browsers?

html

css

cross-browser

vendor-prefix