2

フォントの同じ CSS 定義を共有する と 要素がありspanます。inputChrome がそれらに異なるフォントを使用するのはなぜですか? この問題を解決するにはどうすればよいですか?

入力要素の検査

検査されたスパン要素

私の目的は、IE9、Chrome、および FF でまったく同じに見えるようにすることです。

CSS 定義 (修正済み)、まだ問題がある場合。

* {
    font-family: Verdana,Helvetica,Arial,sans-serif; /* Moving here fixed it */
}
body {
    /*font-family: Verdana,Helvetica,Arial,sans-serif; -- This caused the issue*/
    font-size: .8em;
    margin: 0;
    padding: 0;
    color: #000;
}
.button 
{
    text-align:center;
    min-width:80px;
    display:inline-block;
    white-space:nowrap;
    background-color:#4A8CF6;
    color:#FFF;
    padding:4px;
    margin:1px;
    border:0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    font-size: .8em;
}

解決

問題は、body の CSS 定義から継承された span 要素と、input 要素が継承されなかったことです。計算結果のショーのようにCSSでフォントを定義しましたが、body { font-family:...; }使用すると両方が本体からフォントを継承するように強制されると思いdisplay: inline-block;ましたが、そうではありませんでした。

* { font-family:...; }解決策は、フォント定義を使用するように切り替えることでした。ボタンとクリック可能なクラスは、サイズと色などを単純に定義しました。

4

2 に答える 2

4

次のように、入力要素を同じフォントにしたい場合は、文字通り入力要素を指定する必要があります。

/* Or input[type=submit] depending on your needs */
span, input { 
    font-family: Arial, sans-serif; /* Your font here */
}

それ以外の場合、ブラウザは質問が示すようにデフォルト値を使用します。Computed Stylesの下を見ています。これは、値を指定していないため、Chrome が値を決定したことを示しています。

于 2013-01-23T08:57:35.297 に答える
-2

スタイル シートの先頭に CSS リセット ルールを適用する必要があります。その目的は、すべての要素がすべてのブラウザーで同じ外観を持つようにすることです。

例:

http://developer.yahoo.com/yui/reset/

http://meyerweb.com/eric/tools/css/reset/

関連する質問も役立ちます: https://stackoverflow.com/questions/116754/best-css-reset

于 2013-01-23T08:53:37.027 に答える