CSS3 iOS badge text not vertically centering - css

Question

I have setup a CSS profile to create an iOS type notification badge. All is working well except the inner font vertical alignment. Firefox renders the inner text perfectly centered, however webkit browsers (safari, chrome, etc) act as though there is a padding-top applied pushing the font too far from the top. Here is a fiddle for a demo: http://jsfiddle.net/F5wdp/
And here is the code:
.alert-notify-circle{
float:left;
background: radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -moz-radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -ms-radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -o-radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -webkit-radial-gradient( center -9px, circle, white 0, red 26px );
background-color: red;
border: 2px solid white;
border-radius: 15px;
box-shadow: 1px 1px 2px black;
color: white;
font:15px Helvetica, Verdana, Tahoma;
font-weight:500;
padding-top:0px;
height: 14px;
line-height:16px;
padding-left:1px;
text-align: center;
width: 14px;
z-index:10;
}
<div class='alert-notify-circle notify-upper-left'>2</div>
Please let me know if you need more information, and thanks in advance for any and all help.

Answer 1

I believe this is a problem of font metrics. Using line-height to make the vertical alignment may give different results from browser to browser depending on how they render text. I would suggest to use padding to balance out vertical spacing, such as:
.alert-notify-circle {
min-width:.5em;
height:1.3em;
padding:0 .375em;
font:bold 1em Arial;
line-height:1.4em;
color: white;
border-radius: 1em;
border: 2px solid white;
box-shadow: 0 .25em .4em rgba(0,0,0,.33);
background-clip:padding-box;
background-color:#e91823;
background-image: linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -o-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -ms-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -moz-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -webkit-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F9BABD), color-stop(0.5, #ED3F48), color-stop(0.5, #E91822), color-stop(1, #C50104));
}
Check out this badge I built for you as an example. I updated it for better cross-browser compatibility:
http://jsfiddle.net/x2xjB/3/
Recommended reading:
http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/