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

Question

So I'm developing these elements and trying to figure out why they look different in moz and webkit browsers. Here is the 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>

And here is the 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;
}

Here is a link to the demo: http://codepen.io/obliviga/pen/OMNMra

Is there any fix I can apply to make those facet-counts look the same on all browsers? And by same, I mean how they look on Firefox. Thanks.

Answer 1

For the height difference you can add:

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

For the text weight difference you can try:

text-rendering: optimizeLegibility;

But typically you can't make Moz and WebKit display text 100% exactly the same. Try Google Fonts. They are more cross-browser consistent than built in system fonts like Helvetica.