什么是用户代理样式表

最新推荐文章于 2025-02-06 15:27:35 发布

xfxf996

最新推荐文章于 2025-02-06 15:27:35 发布

阅读量6.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css google-chrome

原文链接：https://oldbug.net/q/qnJY/What-is-user-agent-stylesheet

本文翻译自：What is user agent stylesheet

I'm working on a web page in Google Chrome. 我正在使用Google Chrome浏览器中的网页。 It displays correctly with the following styles. 它可以正确显示以下样式。

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

It is important to note that I didn't define these styles. 重要的是要注意，我没有定义这些样式。 On Chrome dev tools, it says user agent stylesheet in 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-size from these new styles is disturbing my design. 这些新样式的font-size困扰着我的设计。 Is there any way to force my stylesheets and if possible, completely overwrite Chrome's default stylesheet? 有什么方法可以强制我的样式表，并在可能的情况下完全覆盖Chrome的默认样式表？

#1楼

参考：https://stackoom.com/question/qnJY/什么是用户代理样式表

#2楼

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

#3楼

What are the target browsers? 目标浏览器是什么？ Different browsers set different default CSS rules. 不同的浏览器设置不同的默认CSS规则。 Try including a CSS reset, such as the meyerweb css reset or normalize.css , to remove those defaults. 尝试包括CSS重置，例如meyerweb css reset或normalize.css ，以删除这些默认值。 Google "css reset vs normalize" to see the differences. Google“将CSS重置与归一化”以查看差异。

#4楼

Regarding the concept “user agent style sheet”, consult section Cascade in 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). 因此，如果您认为用户代理样式表有问题，那么您的标记或样式表或两者都确实有问题（关于它您什么也没写）。

#5楼

Some browsers use their own way to read .css files. 某些浏览器使用自己的方式读取.css文件。 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. 因此，这是正确的解决方法：如果直接在.html源代码中键入命令行，则会击败.css文件，这样，您就直接告诉浏览器该怎么做，并且浏览器处在不可读的位置.css文件中的命令。 Remember that the commands writen in the .html file is stronger than the command in the .css. 请记住，.html文件中写入的命令比.css中的命令更强大。