CSS 什么是用户代理样式表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12582624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is a user agent stylesheet?
提问by Kapil Sharma
I'm working on a web page in Google Chrome. It displays correctly with the following styles.
我正在 Google Chrome 中处理网页。它以以下样式正确显示。
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
It is important to note that I didn't define these styles. In Chrome developer tools, it says user agent stylesheetin place of the CSS file name.
需要注意的是，我没有定义这些样式。在 Chrome 开发者工具中，它用用户代理样式表代替 CSS 文件名。
Now if I submit a form and some validation error occurs, I get the following stylesheet:
现在，如果我提交表单并发生一些验证错误，我会得到以下样式表：
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;
}
The font-sizefrom these new styles is disturbing my design. Is there a way to force my stylesheets and if possible, completely overwrite Chrome's default stylesheet?
在font-size这些新的风格被扰乱我的设计。有没有办法强制我的样式表，如果可能的话，完全覆盖 Chrome 的默认样式表？
采纳答案by Oliver Millington
What are the target browsers? Different browsers set different default CSS rules. Try including a CSS reset, such as the meyerweb CSS resetor normalize.css, to remove those defaults. Google "CSS reset vs normalize" to see the differences.
目标浏览器是什么？不同的浏览器设置不同的默认 CSS 规则。尝试包含 CSS 重置，例如meyerweb CSS reset或normalize.css，以删除这些默认值。谷歌“CSS 重置 vs 规范化”以查看差异。
回答by Jesper Mygind
If <!DOCTYPE>is missing in your HTML content you may experience that the browser gives preference to the "user agent stylesheet" over your custom stylesheet. Adding the doctype fixes this.
如果<!DOCTYPE>您的 HTML 内容中缺少 ，您可能会遇到浏览器优先于“用户代理样式表”而不是自定义样式表。添加 doctype 解决了这个问题。
回答by Jukka K. Korpela
Regarding the concept “user agent style sheet”, consult section Cascadein the CSS 2.1 spec.
关于“用户代理样式表”的概念，请参阅CSS 2.1 规范中的Cascade部分。
User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this.
用户代理样式表会被您在自己的样式表中设置的任何内容覆盖。它们只是最底层：在没有页面或用户提供任何样式表的情况下，浏览器仍然必须以某种方式呈现内容，而用户代理样式表只是描述了这一点。
So if you think you have a problem with a user agent style sheet, then you really have a problem with your markup, or your style sheet, or both (about which you wrote nothing).
因此，如果您认为用户代理样式表有问题，那么您的标记或样式表或两者都有问题（您什么也没写）。
回答by Daniel
Marking the document as HTML5 by the proper doctype on the first line, solved my issue.
通过第一行的正确文档类型将文档标记为 HTML5，解决了我的问题。
<!DOCTYPE html>
<html>...
回答by Kenneth Stoddard
A user agent style sheet is a ”default style sheet” provided by the browser (e.g., Chrome, Firefox, Edge, etc.) in order to present the page in a way that satisfies ”general presentation expectations.” For example, a default style sheet would provide base styles for things like font size, borders, and spacing between elements. It is common to employ a resetstyle sheet to deal with inconsistencies amongst browsers.
用户代理样式表是浏览器（例如 Chrome、Firefox、Edge 等）提供的“默认样式表”，以便以满足“一般呈现期望”的方式呈现页面。例如，默认样式表将为字体大小、边框和元素之间的间距等内容提供基本样式。通常使用重置样式表来处理浏览器之间的不一致。
From the specification...
从规范...
A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language. ~ The Cascade.
用户代理的默认样式表应该以满足文档语言的一般表示期望的方式来表示文档语言的元素。〜级联。
For more information about user agents in general, see user agent.
有关一般用户代理的更多信息，请参阅用户代理。
回答by Ebrahim Byagowi
Answering the question in title, what is the user agent stylesheet, the set of default styles in the browser: Here are some of them (and most relevant ones also in today's web):
回答标题中的问题，什么是用户代理样式表，浏览器中的默认样式集：以下是其中一些（以及当今网络中最相关的一些）：
Gecko (Firefox): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
Chromium (Chrome): 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
壁虎（火狐）：https: //dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
铬（Chrome）：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
Personal opinion: Don't fight with them. They have good default values, for example, in rtl/bidi cases and are consistent nowadays. Reset what you see irrelevant to you, not all of them at once.
个人意见：不要和他们打架。它们有很好的默认值，例如，在 rtl/bidi 情况下，并且现在是一致的。重置您看到的与您无关的内容，而不是一次重置所有内容。
回答by BenM
Define the values that you don't want to be used from Chrome's user agent style in your own CSS content.
在您自己的 CSS 内容中定义您不想在 Chrome 的用户代理样式中使用的值。
回答by rollin_jeksun
Some browsers use their own way to read .css files. So the right way to beat this: If you type the command line directly in the .html source code, this beats the .css file, in that way, you told the browser directly what to do and the browser is at position not to read the commands from the .css file. Remember that the commands writen in the .html file is stronger than the command in the .css.
一些浏览器使用自己的方式来读取 .css 文件。所以解决这个问题的正确方法：如果你直接在 .html 源代码中输入命令行，这会击败 .css 文件，这样，你直接告诉浏览器做什么，浏览器处于不读取的位置.css 文件中的命令。请记住，.html 文件中写入的命令比 .css 中的命令更强。
回答by Appy Sharma
I had the same problem as one of my <div>'s had the margin set by the browser. It was quite annoying but then I figured out as most of the people said, it's a markup error.
我遇到了同样的问题，因为我的 <div> 之一具有由浏览器设置的边距。这很烦人，但后来我发现正如大多数人所说，这是一个标记错误。
I went back and checked my <head> section and my CSS link was like below:
我回去检查了我的 <head> 部分，我的 CSS 链接如下所示：
<link rel="stylesheet" href="ex.css">
<link rel="stylesheet" href="ex.css">
I included typein it and made it like below:
我包含type在其中并使其如下所示：
<link rel="stylesheet" type="text/css" href="ex.css">
<link rel="stylesheet" type="text/css" href="ex.css">
My problem was solved.
我的问题解决了。
回答by Brent Miller
I just wanted to expand on the response from @BenM based on what I read herefrom Ire Aderinokun. Because the user-agent stylesheet provides helpful default styling, think twice before overriding it.
我只是想根据我从 Ire Aderinokun在这里读到的内容来扩展@BenM 的回复。因为用户代理样式表提供了有用的默认样式，所以在覆盖它之前要三思。
I had a dumb error where a button element didn't look right in Chrome. I had partially styled it because I didn't want it to look like a traditional button. However, I left out style elements like border, border-color, etc. So Chrome was stepping in to supply the parts that it thought I was missing.
我有一个愚蠢的错误，其中按钮元素在 Chrome 中看起来不正确。我已经部分设计了它，因为我不希望它看起来像一个传统的按钮。但是，我遗漏了边框、边框颜色等样式元素。因此 Chrome 正在介入以提供它认为我缺少的部分。
The problem went away once I added styles like border: none, etc.
一旦我添加了诸如border: none等样式，问题就消失了。
So if anyone else is having this problem, make sure you are explicitly overriding all the applicable default user-agent styles for an element if you notice it looks wonky, especially if you don't want to reset the user agent styles completely. It worked for me.
因此，如果其他人遇到此问题，请确保在发现元素看起来不稳定时明确覆盖所有适用的默认用户代理样式，尤其是当您不想完全重置用户代理样式时。它对我有用。
