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

以下是演示的链接：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浏览器中使填充看起来一样？

1 个答案: