什么是用户代理样式表？答案

【问题标题】：What is a user agent stylesheet?什么是用户代理样式表？
【发布时间】：2012-09-16 22:49:50
【问题描述】：

我正在 Google Chrome 中处理网页。它使用以下样式正确显示。

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

请务必注意，我没有定义这些样式。在 Chrome 开发者工具中，它使用 user agent stylesheet 代替 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 的默认样式表？

【问题讨论】：

chrome : how to turn off user agent stylesheet settings?
另请注意，在 Chrome (51) 上，当您没有 doctype 声明时，您只会获得这两个表条目。否则，你只能得到第二个。
在更多工具中清除 chrome 缓存 -> 清除浏览数据
相关帖子here。了解用户代理（或浏览器）样式表与用户和作者样式表的不同之处将有助于轻松概念化事物。

标签： css google-chrome

【解决方案1】：

目标浏览器是什么？不同的浏览器设置不同的默认 CSS 规则。尝试包含 CSS 重置，例如 meyerweb CSS reset 或 normalize.css，以删除这些默认值。谷歌“CSS 重置与规范化”以查看差异。

【讨论】：

我总是在每个项目之前重置/规范化我的 CSS，这样你就有一个跨浏览器的“几乎”级别的字段。我从来没有听说过这样的负面“副作用”，我相信如果你快速浏览一下谷歌，你会发现它是推荐的。
重置样式可能会导致表单字段出现奇怪的结果，尤其是在字段边框或像 type="file" 这样的多部分元素周围。
尽管重置/规范化可能会有所帮助，但它并不能真正回答用户代理样式表为什么会发生变化的问题？我有同样的问题，他们的 UA 样式对于我用于 SEO 的预渲染页面变得不同。关于它为什么会改变的任何想法？
查看 Chrome 对网页的默认设置：trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
这不是答案...添加<!DOCTYPE> 是@Sebas 的正确答案

【解决方案2】：

如果您的 HTML 内容中缺少<!DOCTYPE>，您可能会遇到浏览器优先选择“用户代理样式表”而不是您的自定义样式表。添加 doctype 可以解决此问题。

【讨论】：

这是一个很好的提示。你为我节省了一些研究时间。 Worth 指出，就我而言，我有那个 doctype 声明，但我之前有一个脚本。看起来 DOCTYPE 必须首先出现在页面中才能考虑在内。
添加解决了我遇到的一个非常奇怪的 tr/td 垂直对齐问题。感谢您的回答。
这是吹毛求疵，但为我解决了这个问题。
我启用了但仍需正常化。
@ChrisMorgan 引用您链接到的规范：“由于遗留原因，需要 DOCTYPE。省略时，浏览器倾向于使用与某些规范不兼容的不同呈现模式。包括 DOCTYPE 在一份文件可确保浏览器尽最大努力遵循相关规范”。在理想的世界中，不需要 DOCTYPE。但声称答案是“不是真的”恕我直言，尤其是考虑到赞成票的数量。

【解决方案3】：

关于“用户代理样式表”的概念，请参阅 CSS 2.1 规范中的 Cascade 部分。

用户代理样式表会被您在自己的样式表中设置的任何内容覆盖。它们只是最底层：在页面或用户没有提供任何样式表的情况下，浏览器仍然必须以某种方式呈现内容，而用户代理样式表只是描述了这一点。

因此，如果您认为您的用户代理样式表有问题，那么您的标记或样式表或两者都有问题（您对此一无所知）。

【讨论】：

@givanse，不，当您不覆盖用户代理样式表效果时，您会看到它们，您的示例标记也不例外。它将被解析为一个 li 元素，其中包含两个仅包含文本内容的 ul 元素；它们由用户代理样式表设置样式，但可以覆盖此样式。（标记是否无效取决于上下文和 HTML 版本；但这不影响样式。）
@givanse，这个问题与“什么是用户样式表”这个问题无关。如果您认为问题很重要，请将其作为新问题发布，并提供足够的详细信息。但是您的 jsfiddle 中的项目符号只是 li 元素的项目符号，并且您的样式表不会覆盖它。
在我的情况下，存在 CSS 说明符问题，但有关用户代理的这些信息也很有帮助。

【解决方案4】：

通过第一行的正确文档类型将文档标记为 HTML5，解决了我的问题。

<!DOCTYPE html>
<html>...

【讨论】：

你能解释一下它应该如何工作吗？ HTML 5 如何与未定义的样式相关联？我会确认，但你有什么现成的小提琴来确认吗？

【解决方案5】：

用户代理样式表是浏览器（例如 Chrome、Firefox、Edge 等）提供的“默认样式表”，用于以满足“一般呈现期望”的方式呈现页面。例如，默认样式表将为字体大小、边框和元素之间的间距等内容提供基本样式。通常使用reset 样式表来处理浏览器之间的不一致。

从规范...

用户代理的默认样式表应该以满足文档语言的一般呈现期望的方式呈现文档语言的元素。 ~The Cascade.

有关一般用户代理的更多信息，请参阅user agent。

【讨论】：

我觉得这实际上比公认的答案更能回答这个问题......

【解决方案6】：

回答标题中的问题，什么是用户代理样式表，浏览器中的默认样式集：以下是其中一些（以及当今网络中最相关的样式）：

壁虎（火狐）：https://searchfox.org/mozilla-central/source/layout/style/res/html.css
铬（铬）：https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit (Safari)：https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

个人意见：不要和他们吵架。它们具有良好的默认值，例如，在 rtl/bidi 情况下，并且现在是一致的。重置您认为与您无关的内容，而不是一次全部重置。

【讨论】：

【解决方案7】：

在您自己的 CSS 内容中定义您不想从 Chrome 的用户代理样式中使用的值。

【讨论】：

【解决方案8】：

一些浏览器使用自己的方式来读取 .css 文件。所以打败这个的正确方法：如果您直接在 .html 源代码中键入命令行，这将击败 .css 文件，这样，您直接告诉浏览器该做什么，并且浏览器处于不读取 .css 文件中的命令的位置。请记住，写在 .html 文件中的命令比写在 .css 文件中的命令强。

【讨论】：

【解决方案9】：

我遇到了同样的问题，因为我的一个

的边距由浏览器设置。这很烦人，但后来我发现正如大多数人所说，这是一个标记错误。

我回去检查了我的

部分，我的 CSS 链接如下所示：

<link rel="stylesheet" href="ex.css">

我将type 包含在其中并使其如下所示：

<link rel="stylesheet" type="text/css" href="ex.css">

我的问题解决了。

【讨论】：

【解决方案10】：

我只是想根据我来自 Ire Aderinokun 的 read here 来扩展 @BenM 的回复。因为用户代理样式表提供了有用的默认样式，所以在覆盖它之前要三思。

我遇到了一个愚蠢的错误，即按钮元素在 Chrome 中看起来不正确。我对它进行了部分样式设置，因为我不希望它看起来像一个传统的按钮。但是，我遗漏了边框、边框颜色等样式元素。因此 Chrome 正在介入以提供它认为我缺少的部分。

一旦我添加了border: none等样式，问题就消失了。

因此，如果其他人遇到此问题，请确保在您发现某个元素看起来不正常时明确覆盖所有适用的默认用户代理样式，尤其是在您不想完全重置用户代理样式的情况下.它对我有用。

【讨论】：

这不应该是评论而不是答案吗？
@PeterMortensen 是的，但我不能离开 cmets - 没有足够的声誉。
也许它应该是一个评论......但是，这解决了一个我已经挣扎了几个小时的问题。

【解决方案11】：

每个浏览器都提供一个默认样式表，称为用户代理样式表，以防 HTML 文件未指定。您指定的样式会覆盖默认值。

由于您没有为表格元素的框指定值，因此已应用默认样式。

【讨论】：

【解决方案12】：

我遇到了同样的问题，这是因为我使用的是非语义 html

<!--incorrect-->
<ul class="my-custom-font">
  <button>
    <a>user agent styles applied instead of my-custom-font</a>
  <button>
</ul>

<!--correct-->
<ul class="my-custom-font">
  <li>
    <a>now inherits from from my-custom-font</a>
  </li>
</ul>

HTML 更新后，样式已正确应用

【讨论】：

【解决方案13】：

我有一个解决方案。检查这个：

错误

<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">

正确

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">

【讨论】：

请编辑解释它是如何工作的以及它为什么有用。

【解决方案14】：

将以下代码放入您的 CSS 文件中：

table {
    font-size: inherit;
}

【讨论】：

这并没有真正为这篇文章添加任何新内容。已经有一个接受的答案，以及其他 5 个答案，所以请不要发布迟到的答案。