0

更新：この問題はChrome（最新バージョン）でのみ発生することに注意してください。Firefoxではすべてがうまくいくようです。

定義によると：

rem単位は、ルート（または）要素を基準にしてい<html>ます。つまり、<html>要素に単一のフォントサイズを定義し、すべてのrem単位をそのパーセンテージとして定義できるということです。

例を挙げて私の状況を説明しましょう...

関連するCSS：

html {
    font-size: 87.5%;
}

body {
    font-size: 17px;
    font-size: 1.21428571rem;
}

code {
    font-size: 14px !important;
    font-size: 1rem !important;
}

宣言を使用して、!importantインラインコードのフォントサイズをオーバーライドしています。

問題は、コードブロックのフォントサイズが14pxよりはるかに小さいことに気づきました。おそらく12pxです。しかし、宣言を削除!importantして特定の要素にfont-sizeを設定するとcode（特定のインラインコード要素のスタイルを設定する）、fonts-sizeは14pxのように見えます。

!important宣言がのサイズ設定にどのように影響するかについて何か考えがありremますか？（特に私の場合は考慮します。）

4

2 に答える 2

2

まず、!important怠惰なコーディングと保守性にとって危険です。それは有毒であり、CSS（カスケード部分）の性質を壊します。絶対に避けてください。

2番：

code {
    font-size: 14px !important;
    font-size: 1rem !important;
}

同様に書かれるかもしれません：

code {
    font-size: 1rem !important;
}

2番目のルールは最初のルールをオーバーライドします（ここでも、CSSのカスケードの性質）

remルートemを表します。これは、最上位の要素（つまり、html）のフォントサイズです。

そして、あなたのルールが言っていることは、html要素のemの1倍であり、ブラウザのデフォルトの87.5％です。

編集：

<p>タグのafont-sizeは親要素から100％継承され、最終的には継承され、body約17pxになります。これがフォントサイズの違いが見られる理由です。これは、モノスペースとサンセリフの違いによってさらに悪化します。フォント。body1.2142857rem

于 2012-07-19T17:29:49.877 に答える
1

問題は、（1） font-familyブロックが定義されていないことでしcodeた。つまり、Chromeや他のWebkitブラウザーは、小さく見える（2）小さい（ほぼ等しい）preモノスペースフォントを選択しました。 line-heightfont-size

これら2つを修正することで、問題は解決しました。

Chrome Dev Tools Web Inspectorの「ComputedStyle」がフォントサイズとして11pxを表示する理由がわかりません（Safariを含むすべてのWebkitブラウザーにも適用されます）。フォントをArialに変更することで、14pxであることが簡単にわかるため、間違った値が表示されていることを確認できます。

また、font-familyオンcodeとpreブロックを設定した後、Chromeは正しい計算font-size値を表示するようになりました。

于 2012-07-20T02:40:03.960 に答える