CSS3 iOS 徽章文本不垂直居中

Question

我已经设置了一个 CSS 配置文件来创建一个 iOS 类型的通知徽章。除了内部字体垂直对齐外，一切都运行良好。 Firefox 使内部文本完美居中，但是 webkit 浏览器(safari、chrome 等)就像应用了 padding-top 将字体推离顶部太远一样。这是演示的 fiddle :http://jsfiddle.net/F5wdp/

代码如下:

.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>

如果您需要更多信息，请告诉我，在此先感谢您提供的所有帮助。

Answer 1

我认为这是字体指标的问题。使用 line-height 进行垂直对齐可能会在浏览器之间产生不同的结果，具体取决于它们呈现文本的方式。我建议使用填充来平衡垂直间距，例如:

.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));

以我为您制作的这个徽章为例。我更新了它以获得更好的跨浏览器兼容性:

http://jsfiddle.net/x2xjB/3/

推荐阅读:

http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/