584

Google Chrome で Web ページを作成しています。以下のスタイルで正しく表示されます。

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

私がこれらのスタイルを定義していないことに注意することが重要です。Chrome デベロッパー ツールでは、CSS ファイル名の代わりにユーザー エージェント スタイルシートと表示されます。

フォームを送信して検証エラーが発生すると、次のスタイルシートが表示されます。

table {
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-variant: normal;
    font-style: normal;
    color: -webkit-text;
    text-align: -webkit-auto;
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

これらfont-sizeの新しいスタイルが私のデザインを妨げています。スタイルシートを強制し、可能であれば Chrome のデフォルト スタイルシートを完全に上書きする方法はありますか?

4

14 に答える 14

275

対象ブラウザは？ブラウザが異なれば、デフォルトの CSS ルールも異なります。meyerweb CSS リセットやnormalize.cssなどの CSS リセットを含めて、これらのデフォルトを削除してみてください。Google の「CSS リセットと正規化」で違いを確認してください。

于 2012-09-25T12:12:15.223 に答える
177

HTML コンテンツに がない場合<!DOCTYPE>、ブラウザがカスタム スタイルシートよりも「ユーザー エージェント スタイルシート」を優先することがあります。doctype を追加すると、これが修正されます。

于 2015-10-22T14:11:03.520 に答える
126

「ユーザー エージェント スタイル シート」という概念については、CSS 2.1 仕様のセクションCascadeを参照してください。

ユーザー エージェント スタイル シートは、独自のスタイル シートで設定したものによってオーバーライドされます。それらはただのどん底です: ページまたはユーザーによって提供されたスタイル シートがない場合でも、ブラウザーは何らかの方法でコンテンツをレンダリングする必要があり、ユーザー エージェント スタイル シートはこれを記述するだけです。

したがって、ユーザー エージェント スタイル シートに問題があると思われる場合は、実際にはマークアップまたはスタイル シート、あるいはその両方に問題があります (それについては何も書いていません)。

于 2012-09-25T16:25:51.180 に答える
52

Marking the document as HTML5 by the proper doctype on the first line, solved my issue.

<!DOCTYPE html>
<html>...
于 2015-08-13T07:45:56.820 に答える
37

ユーザー エージェント スタイル シートは、「一般的なプレゼンテーションの期待」を満たす方法でページを表示するために、ブラウザー (Chrome、Firefox、Edge など) によって提供される「デフォルトのスタイル シート」です。たとえば、デフォルトのスタイル シートは、フォント サイズ、境界線、要素間の間隔などの基本スタイルを提供します。ブラウザー間の不一致に対処するために、リセットスタイル シートを使用するのが一般的です。

仕様から...

ユーザー エージェントのデフォルトのスタイル シートは、ドキュメント言語に対する一般的なプレゼンテーションの期待を満たす方法で、ドキュメント言語の要素を提示する必要があります。〜カスケード。

一般的なユーザー エージェントの詳細については、ユーザー エージェントを参照してください。

于 2016-02-20T17:45:24.633 に答える
14

独自の CSS コンテンツで、Chrome のユーザー エージェント スタイルから使用したくない値を定義します。

于 2012-09-25T12:07:29.910 に答える
2

Ire Aderinokun からここで読んだ内容に基づいて、@BenM からの応答を拡張したかっただけです。ユーザー エージェント スタイルシートは便利なデフォルト スタイルを提供するため、オーバーライドする前によく考えてください。

ボタン要素が Chrome で正しく表示されないという愚かなエラーが発生しました。従来のボタンのように見せたくなかったので、部分的にスタイリングしました。ただし、border、border-color などのスタイル要素を省略しました。そのため、Chrome は、私が不足していると思われる部分を提供するために介入していました。

border: noneなどのスタイルを追加すると、問題はなくなりました。

したがって、他の誰かがこの問題を抱えている場合、特にユーザー エージェント スタイルを完全にリセットしたくない場合は、要素に適用可能なすべてのデフォルトのユーザー エージェント スタイルを明示的にオーバーライドしていることを確認してください。それは私のために働いた。

于 2020-04-16T15:40:33.980 に答える
-7

次のコードを CSS ファイルに追加します。

table {
    font-size: inherit;
}
于 2016-02-08T10:38:43.180 に答える