了解使用者代理樣式表的作用

Question

我正在 Google Chrome 處理網頁。它可以正確顯示以下樣式。

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 的預設樣式表？

Answer 1

如果您的 HTML 內容中缺少 ，您可能會遇到瀏覽器優先考慮「使用者代理樣式表」而不是您的自訂樣式表的情況。新增文件類型可以解決此問題。

Answer 2

目標瀏覽器是什麼？不同的瀏覽器設定不同的預設 CSS 規則。嘗試新增 CSS 重置，例如 meyerweb CSS 重置 或 normalize.css，刪除這些預設值。谷歌“CSS重置與正常化”以查看差異。