Css 什么是用户代理样式表?
我正在谷歌Chrome的一个网页上工作。它使用以下样式正确显示Css 什么是用户代理样式表?,css,google-chrome,Css,Google Chrome,我正在谷歌Chrome的一个网页上工作。它使用以下样式正确显示 table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; } 需要注意的是,我没有定义这些样式。在Chrome开发者工具中,它用用户代理样式表来代替CSS文件名 现在,如果我提交了一个表单,并且出现了一些验证错误,我会得到以下样式表: table { white-sp
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;
}
这些新样式的
字体大小
干扰了我的设计。有没有办法强制我的样式表,如果可能的话,完全覆盖Chrome的默认样式表?在您自己的CSS内容中定义您不想从Chrome的用户代理样式中使用的值。目标浏览器是什么?不同的浏览器设置不同的默认CSS规则。尝试包括CSS重置,如或,以删除这些默认值。谷歌“CSS重置vs规范化”查看差异。关于“用户代理样式表”的概念,请参阅CSS 2.1规范中的部分
用户代理样式表将被您在自己的样式表中设置的任何内容覆盖。它们只是最底层:在没有页面或用户提供的任何样式表的情况下,浏览器仍然必须以某种方式呈现内容,而用户代理样式表只是描述了这一点
因此,如果您认为用户代理样式表有问题,那么您的标记、样式表或两者都有问题(您没有写任何东西)。一些浏览器使用自己的方式读取.css文件。 因此,正确的解决方法是: 如果您直接在.html源代码中键入命令行,这将胜过.css文件,这样,您就直接告诉浏览器该做什么,浏览器就可以不从.css文件中读取命令。
请记住,在.html文件中编写的命令比在.css中编写的命令更强大。在第一行用正确的doctype将文档标记为HTML5,解决了我的问题
<!DOCTYPE html>
<html>...
...
如果HTML内容中缺少
,您可能会体验到浏览器优先选择“用户代理样式表”而不是自定义样式表。添加doctype可以解决此问题。将以下代码放入CSS文件中:
table {
font-size: inherit;
}
用户代理样式表是由浏览器(例如,Chrome、Firefox、Edge等)提供的“默认样式表”,用于以满足“一般呈现预期”的方式呈现页面。例如,默认样式表将为字体大小、边框和元素之间的间距等提供基本样式。通常使用样式表来处理浏览器之间的不一致 从规范中 用户代理的默认样式表应以满足文档语言一般表示期望的方式显示文档语言的元素。~
有关一般用户代理的详细信息,请参阅。如果HTML文件未指定默认样式表,则每个浏览器都会提供一个称为用户代理样式表的默认样式表。指定的样式将替代默认值
因为您没有为表格元素的框指定值,所以应用了默认样式。我遇到的问题与我的一个浏览器设置了边距的问题相同。这很烦人,但后来我发现,正如大多数人所说,这是一个标记错误 我回去查看了我的部分,我的CSS链接如下:
我将类型
包含在其中,并使其如下所示:
我的问题解决了。回答标题中的问题,什么是用户代理样式表,浏览器中的默认样式集:以下是其中一些样式(以及当今web中最相关的样式):
- Gecko(Firefox):
- 铬(铬):
- WebKit(Safari):
个人意见:不要和他们打架。例如,在rtl/bidi情况下,它们具有良好的默认值,并且现在是一致的。重置与您无关的内容,而不是一次重置所有内容。我有一个解决方案。选中此项: 错误
正确的
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
我只是想根据我从Ire Aderinokun得到的信息来扩展@BenM的回复。因为用户代理样式表提供了有用的默认样式,所以在覆盖它之前要三思 我犯了一个愚蠢的错误,一个按钮元素在Chrome中看起来不正确。我对它进行了部分设计,因为我不想让它看起来像一个传统的按钮。然而,我忽略了诸如边框、边框颜色等样式元素,所以Chrome介入进来提供它认为我缺少的部分 一旦我添加了
border:none
等样式,问题就消失了
因此,如果其他任何人有此问题,请确保如果您注意到某个元素的默认用户代理样式看起来不可靠,特别是如果您不想完全重置用户代理样式,则显式覆盖该元素的所有适用默认用户代理样式。它对我很有用。我遇到了同样的问题,因为我使用的是非语义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被更新,样式就被正确应用了我总是在每个项目之前重置/规范我的CSS,这样你就有了一个跨浏览器的“几乎”级别的字段。我从来没有听说过这样的负面“副作用”,我相信如果你快速浏览谷歌,你会发现这是推荐的。重置样式可能会导致表单字段出现奇怪的结果,特别是在字段边框或多部分元素(如type=“file”)周围。尽管重置/规范化可能会有所帮助,但它并不能真正回答问题,为什么用户代理样式表正在更改?我也有同样的问题,他们在哪里
<!--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>