什么是用户代理样式表?

我正在谷歌Chrome浏览器上做一个网页。它以以下样式正确显示。

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

这些新款式的font-size干扰了我的设计。有没有办法强制我的样式表，如果可能的话，完全覆盖Chrome的默认样式表?

653534 次浏览
小开

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

小开
最佳答案

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

小开

关于“用户代理样式表”的概念，请参考CSS 2.1规范中的级联节。

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

因此，如果您认为用户代理样式表有问题，那么实际上是标记有问题，或者样式表有问题，或者两者都有问题(对此您没有编写任何内容)。

小开
一些浏览器使用自己的方式读取.css文件。 所以正确的解决方法是: 如果您直接在.html源代码中键入命令行，这将击败.css文件，以这种方式，您直接告诉浏览器要做什么，并且浏览器处于不从.css文件读取命令的位置。 请记住，写在.html文件中的命令比写在.css文件中的命令更强大
小开

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

<!DOCTYPE html>
<html>...
小开

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

小开

在CSS文件中放入以下代码:

table {
font-size: inherit;
}
小开

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

从说明书来看……

用户代理的默认样式表应该以满足文档语言的一般表示期望的方式来表示文档语言的元素。~ # EYZ0。

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

小开

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

因为没有为表格元素的框指定值，所以应用了默认样式。

小开

我有同样的问题，因为我的一个<div>'s有由浏览器设置的边距。这很烦人，但后来我发现，就像大多数人说的那样，这是一个标记错误。

我回去检查了我的<head>部分，我的CSS链接如下:

# EYZ0

我加入了type，并使它如下所示:

# EYZ0

我的问题解决了。

小开

回答标题中的问题，什么是用户代理样式表，浏览器中的默认样式集:以下是其中一些(在今天的web中也是最相关的):

个人意见:不要和他们打架。例如，在rtl/bidi情况下，它们具有良好的默认值，并且现在是一致的。重置你看到的与你无关的东西，而不是一次全部重置。

小开

我有一个解决办法。检查:

错误

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

正确的

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

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

我有一个愚蠢的错误，按钮元素在Chrome中看起来不正确。我对它进行了部分设计，因为我不想让它看起来像一个传统的按钮。但是，我省略了像border, border-color等样式元素。所以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，就正确地应用了样式


提交答案