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

【问题标题】：How to make padding look the same in moz and webkit browsers?如何在 moz 和 webkit 浏览器中使填充看起来相同？
【发布时间】：2015-12-17 16:45:31
【问题描述】：

所以我正在开发这些元素并试图弄清楚为什么它们在 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;
}

这里是演示链接：http://codepen.io/obliviga/pen/OMNMra

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

【问题讨论】：

您尝试过 CSS 重置吗？

标签： html css cross-browser vendor-prefix

【解决方案1】：

对于高度差可以加：

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

对于文字粗细的差异你可以试试：

text-rendering: optimizeLegibility;

但通常你不能让 Moz 和 WebKit 显示的文本 100% 完全相同。试试谷歌字体。它们比 Helvetica 等内置系统字体更具有跨浏览器的一致性。

【讨论】：