了解用户代理样式表的作用

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重置与正常化”以查看差异。