2015-01-08 28 views
7

編集***どのような場合に、ユーザエージェントスタイルはカスタムCSSを上書きできますか?ユーザエージェントスタイルシート自分のスタイルを上書きする


私は私のページ上の要素に設定いくつかのスタイルを持って、ユーザーエージェントスタイルシートは、私の定義をオーバーライドしているようです。

それはではなく、IEにクロームバージョン39.0.2171.95メートル、Firefoxの34.0.5で起こっている11

私はその要素上の任意の直接的なスタイルを持っていない知っているが、それは私の理解であります特定の要素のスタイルがまったくない場合は、ユーザーエージェントスタイルシートのみが引き継ぎます。継承されたスタイルはそれに含まれませんか?

enter image description here

+0

問題を再現するには、十分なHTMLとCSSをテキストとして含める必要があります。 –

+0

私はCSSとHTMLのページを投稿する必要があります。 Chromeデベロッパーツールで計算されたスタイルを単純に投稿すると、要素に適用されたスタイルがあることがわかりますが、ユーザーエージェントスタイルでオーバーライドされています。私は私の質問に投稿する必要がありますね "どのような場合にユーザーエージェントスタイルはカスタムCSSを上書きできますか?" - 私は今それをします。 –

+1

いいえ、問題を実証している* minimal *文書を投稿してください。しかし私の答えでは、私は単純なケースを再構築したと思う。また、質問を実質的に異なる質問に変更したり、特定の問題が発生したときに一般的な質問をするべきではありません。一般的な質問はしばしば広すぎるとみなされます(そうでなくても、実際の問題を解決できないかもしれません)。 –

答えて

8

一般的な質問への答えは、スタイル設定「勝利」を決定する際の要素自体に設定された唯一のプロパティ設定が考慮されていることです。たとえば、body要素にfont-size: 18pxを設定し、p要素にfont-size: 9pxを設定する別のスタイルシートを設定したスタイルシートが1つしかない場合は、スタイルシートの元の内容にかかわらず、p要素のフォントサイズは9pxです。例えば後者が単にブラウザのデフォルトスタイルシートであるかどうか。継承はここでは何の役割も果たしません。これはすべて、CSS 2.1仕様のセクションAssigning property values, Cascading, and Inheritanceに記載されています。

継承は、上記の「戦い」が解決された後にのみ考慮されます。そのときだけ継承可能なプロパティは、に設定されていない要素に継承されます。すべてです。

具体的な質問特定のコードを提供していませんが、あなたがこのような何かを持っていることを推測することができます。

<style> 
    body { font-size: 12px; } 
</style> 
<table> 
    <tr><td>foo 
</table> 
bar 

は、通常、これは12ピクセルのサイズで表示されるように「foo」と「bar」の両方の原因となります。テーブルセルはテーブルの行からサイズを継承します。テーブルの行はtbody要素から継承され、テーブルから継承されます。テーブルはbodyから継承されます。

ただし、あなたのケースでは、このチェーンが壊れています。その理由は、ブラウザスタイルシートが実際には16pxを意味する傾向にあるので、ブラウザスタイルシートは

table { font-size: medium } 

です。 table要素にはプロパティが設定されているので、セルはその値を継承します。

ブラウザには通常、スタイルシートにそのようなルールはありません。ただし、Quirks Modeでは、ほとんどのブラウザでルールが適用されます。つまり、フォントサイズはbodyからテーブルに継承されません。これはIEの非常に古いバージョンのバグ(または奇妙なもの)を反映しており、従来のページをレンダリングすることができます。

あなたは意図せず癖モードを引き起こしていると、ちょうどあなたの文書の非常に開始時に

<!DOCTYPE html> 

を平手打ち、他の目的のためにそれを必要としない場合。しかし、古いページは、Quirksモードに対応するテスト条件で設計されている場合、異なる方法で混乱する可能性があることに注意してください。また

、あなたのスタイルシートに以下のルールを追加します。

table { font-size: 100% } 

このテーブルは、その親のフォントサイズを取得することを意味します。 (継承と同様ですが、より安全です)

-1

要素になしのスタイルを設定していない場合、彼はユーザーエージェントのスタイルを継承し、この問題を回避するためにnormalize.cssを使用しています。

http://necolas.github.io/normalize.css/

+0

はい、私はこれを知っています。しかし、すでに要素にスタイルが適用されています。私の質問は、要素に適用されるスタイルをオーバーライドする理由です。 –