0

ページのいくつかのボタンで Web フォント (ポリ) を使用しています。Firefox ではすべてが正しく表示されますが、Chrome では、同じ CSS3 コードを使用しているにもかかわらず、最初のボタンのフォントが他のボタンよりも太く見えます (タイプミスがない限り)。

http://ashgavs.cloudant.com/site/_design/AshGavsCouch/betcha/index.html

それがページです。Login vs. Login with facebook または Sign up をご覧ください。フォントの太さに影響を与えるのはテキストの長さではなく、すでにテスト済みです。

最初と 2 番目のボタンの CSS は次のとおりです。

     #login{
        position: absolute;
        top: 137px;
        left: 19px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: 1px solid #aff797;
        background: #369942;
        background: -webkit-gradient(linear, left top, left bottom, from(#27ca3d), to(#369942));
        background: -webkit-linear-gradient(top, #27ca3d, #369942);
        background: -moz-linear-gradient(top, #27ca3d, #369942);
        background: -ms-linear-gradient(top, #27ca3d, #369942);
        background: -o-linear-gradient(top, #27ca3d, #369942);
        -webkit-border-radius: 11px;
        -moz-border-radius: 11px;
        border-radius: 5px;
        -webkit-box-shadow: rgba(0,0,0,.7) 0 1px 0;
        -moz-box-shadow: rgba(0,0,0,.7) 0 1px 0;
        box-shadow: rgba(0,0,0,.7) 0 1px 0;
        text-shadow: 0 1px 0 #91d99a;
        color: #0e5817;
        font-size: 24px;
        font-family: 'Poly', serif;
        text-decoration: none;
        vertical-align: center;
        width: 229px;
    }

    #loginFB{
        position: absolute;
        top: 196px;
        left: 19px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: 1px solid #65a9d7;
        background: #3e779d;
        background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
        background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
        background: -moz-linear-gradient(top, #65a9d7, #3e779d);
        background: -ms-linear-gradient(top, #65a9d7, #3e779d);
        background: -o-linear-gradient(top, #65a9d7, #3e779d);
        -webkit-border-radius: 11px;
        -moz-border-radius: 11px;
        border-radius: 5px;
        -webkit-box-shadow: rgba(0,0,0,.7) 0 1px 0;
        -moz-box-shadow: rgba(0,0,0,.7) 0 1px 0;
        box-shadow: rgba(0,0,0,.7) 0 1px 0;
        text-shadow: 0 1px 0 #7ca9c7;
        color: #0e3458;
        font-size: 24px;
        font-family: 'Poly', serif;
        text-decoration: none;
        vertical-align: center;
        width: 229px;
      }

どちらのボタンも同じ div からプロパティを継承するため、それも問題にはなりません。ありがとう。--アシュリー

4

1 に答える 1

0

特定のブラウザで発生する可能性があります。いずれにせよ、非常に良いこと (最近ではかなりの要件になっています) は、独自の CSS 定義の前に CSS リセットを追加することです。Google「CSSリセット」だけです。多くの結果が表示されます。基本的に、ブラウザ固有の書式設定を削除して、CSS がページ上で唯一の有効な書式設定になるようにします。ブラウザからの予期しない変更や追加はありません。多くの場合、これを行うと、説明した種類の問題が解決されます。ブラウザの特異性を調べたいと思うかもしれませんが、時間を節約するために最初にリセットしてみてください.

于 2012-08-12T18:11:47.450 に答える