ユーザーエージェントスタイルシートの役割を理解する

Question

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

table {
    表示: テーブル;
    ボーダー折りたたみ: 分離;
    境界線の間隔: 2px;
    境界線の色: グレー;
}

これらのスタイルは私が定義したものではないことに注意してください。 Chrome デベロッパー ツールでは、CSS ファイル名が ユーザー エージェント スタイルシート に置き換えられます。

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

table {
    ホワイトスペース: 通常;
    行の高さ: 通常;
    フォントの太さ: 通常;
    フォントサイズ: 中;
    フォント バリアント: 通常;
    フォントスタイル: 通常;
    色: -webkit-text;
    テキスト整列: -webkit-auto;
}

テーブル {
    表示: テーブル;
    ボーダー折りたたみ: 分離;
    境界線の間隔: 2px;
    境界線の色: グレー;
}

これらの新しいスタイルの font-size はデザインを混乱させます。可能であれば、私のスタイルシートを強制的に Chrome のデフォルトのスタイルシートを完全にオーバーライドする方法はありますか?

Answer 1

が HTML コンテンツに欠落している場合、ブラウザはカスタム スタイル シートよりも「ユーザー エージェント スタイル シート」を優先することがあります。ドキュメント タイプを追加すると、この問題は解決されます。

Answer 2

対象ブラウザは何ですか?ブラウザーが異なれば、設定されるデフォルト CSS ルールも異なります。 meyerweb CSS restart や normalize.css などの CSS リセットを追加して、これらのデフォルト値を削除してみてください。 「CSS リセット vs 正規化」で Google で違いを確認してください。