Question

我正在使用谷歌浏览器的网页。它可以使用以下样式正确显示。

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的默认样式表？

Answer 1

目标浏览器是什么？不同浏览器设置不同的默认CSS规则。尝试包含 reset.css 或 normalise.css （Google用于任何一个或“重置与规范化”以查看差异）以删除这些默认值。或者设置自己的 style.css

Answer 2

如果您的html中缺少<!DOCTYPE>，您可能会遇到浏览器优先于自定义样式表上的“用户代理样式表”。添加doctype会修复此问题。

Answer 3

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

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

因此，如果您认为用户代理样式表存在问题，那么您的标记或样式表或两者都存在问题（关于您没有编写任何内容）。

Answer 4

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

<!DOCTYPE html>
<html>...

Answer 5

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

来自规范......

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

有关用户代理的更多信息......

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

Answer 6

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

Answer 7

有些浏览器使用自己的方式来读取.css文件。所以正确的方法来击败这个：如果直接在.html源代码中键入命令行，这会击败.css文件，这样，您直接告诉浏览器要做什么，浏览器就不会从.css文件中读取命令。请记住，.html文件中写入的命令比.css中的命令强。

Answer 8

回答标题中的问题，什么是用户代理样式表，浏览器中的默认样式集，以下是其中的一些

Mozilla：https://dxr.mozilla.org/mozilla-central/source/browser/base/content/browser.css

铬/铬：https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/html/resources/html.css?q=html.css&sq=package:chromium&dr

WebKit：https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Answer 9

我遇到了同样的问题，其中之一是浏览器设置了边距，这很烦人，但后来我像大多数人所说的那样，发现了标记错误。

我回去检查了我的部分，我的css链接如下：

<link rel="stylesheet" href="ex.css">

我在其中添加了类型，如下所示：

<link rel="stylesheet" type="text/css" href="ex.css">

我的问题解决了。

希望对您有些帮助。

Answer 10

每个浏览器都提供一个默认样式表，称为用户代理样式表，以防HTML文件未指定样式表。您指定的样式会覆盖默认值。因为您没有为表格元素的框指定值，所以已应用默认样式

Answer 11

我只是想根据来自Ire Aderinokun的read here来扩展@BenM的响应。由于用户代理样式表提供了有用的默认样式，因此在覆盖前请三思。

我有一个愚蠢的错误，其中按钮元素在Chrome中看起来不正确。我之所以对它进行部分样式设置是因为我不希望它看起来像传统按钮。但是，我忽略了边框，边框颜色等样式元素。因此Chrome介入其中，提供了我认为自己缺少的部分。

添加border: none等样式后，问题就消失了。

因此，如果其他任何人遇到此问题，请确保您显式覆盖了某个元素的所有适用默认用户代理样式（如果您发现该元素看起来很古怪），尤其是当您不想完全重置用户代理样式时。它对我有用。

Answer 12

我遇到了同样的问题，这是因为我正在使用非语义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后，样式将正确应用

Answer 13

我有解决办法。检查一下：

错误

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

正确

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

Answer 14

将以下代码放入CSS文件

{{1}}

什么是用户代理样式表

14 个答案: