1. ホーム
  2. css

[解決済み] ユーザーエージェントスタイルシートとは何ですか?

2022-03-17 01:55:47

質問

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のデフォルトのスタイルシートを完全に上書きする方法はありますか?

解決方法は?

対象ブラウザは何ですか?ブラウザによって、デフォルトのCSSルールが異なります。のようなCSSリセットを入れてみてください。 Meyerweb CSSリセット または 正規化.css を使用すると、これらのデフォルトを削除することができます。Google "CSS reset vs normalize"で違いを見てみましょう。