什么是用户代理样式表

我正在Google Chrome的网页上工作。 它使用以下样式正确显示。

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

请注意,我没有定义这些样式。 在Chrome开发工具上,它表示“用户代理样式表”代替CSS文件名。

现在,如果我提交一个表单,并发生一些validation错误,我得到以下样式表:

 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; } 

这些新款式的字体大小令人不安。 有什么办法强制我的样式表,如果可能的话,完全覆盖Chrome的默认样式表?

什么是目标浏览器? 不同的浏览器设置不同的默认CSS规则。 尝试包括一个reset.css或一个normalise.css(谷歌任一个或“重置vs正常化”以查看差异)来删除这些默认值。

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

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

所以,如果你认为你的用户代理样式表有问题,那么你的标记或样式表或者两者都有问题(关于你什么都不写)。

如果HTML中缺less<!DOCTYPE>则可能会遇到浏览器优先于自定义样式表上的“用户代理样式表”。 添加doctype修复了这个问题。

在第一行用适当的文档types将文档标记为HTML5,解决了我的问题。

 <!DOCTYPE html> <html>... 

基本上,浏览器提供了一个默认的样式表。 从规格…

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

另请参阅有关用户代理的更多详细信息

https://www.w3.org/TR/UAAG20/#def-user-agent

在您自己的CSS中定义您不希望从Chrome用户代理风格使用的值。

一些浏览器使用自己的方式来读取.css文件。 所以正确的方法是:如果直接在.html源代码中input命令行,则会击败.css文件,这样,您直接告诉浏览器该做什么以及浏览器处于不读取的位置.css文件中的命令。 请记住.html文件中写入的命令比.css中的命令更强。

把下面的代码放到你的CSS文件中

 table { font-size: inherit; }