0

iOS タイプの通知バッジを作成するための CSS プロファイルをセットアップしました。内側のフォントの垂直方向の配置を除いて、すべて正常に機能しています。Firefox は内側のテキストを完全に中央揃えにレンダリングしますが、Webkit ブラウザー (サファリ、クロームなど) は、フォントを上部から遠ざけすぎて、パディングトップが適用されているかのように動作します。デモのフィドルは次のとおりです。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>

さらに情報が必要な場合はお知らせください。すべての助けに感謝します。

4

1 に答える 1

2

これはフォント メトリックの問題だと思います。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/

于 2013-04-08T21:13:12.410 に答える