584

我正在 Google 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 的默认样式表?

4

14 回答 14

275

目标浏览器是什么?不同的浏览器设置不同的默认 CSS 规则。尝试包含 CSS 重置,例如meyerweb CSS 重置normalize.css,以删除这些默认值。谷歌“CSS 重置与规范化”以查看差异。

于 2012-09-25T12:12:15.223 回答
177

如果<!DOCTYPE>在您的 HTML 内容中丢失,您可能会遇到浏览器优先于“用户代理样式表”而不是您的自定义样式表。添加 doctype 解决了这个问题。

于 2015-10-22T14:11:03.520 回答
126

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

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

因此,如果您认为您的用户代理样式表有问题,那么您的标记或样式表或两者都有问题(您对此一无所知)。

于 2012-09-25T16:25:51.180 回答
52

通过第一行的正确文档类型将文档标记为 HTML5,解决了我的问题。

<!DOCTYPE html>
<html>...
于 2015-08-13T07:45:56.820 回答
37

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

从规范...

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

有关一般用户代理的更多信息,请参阅用户代理

于 2016-02-20T17:45:24.633 回答
30

回答标题中的问题,什么是用户代理样式表,浏览器中的默认样式集:以下是其中的一些(以及当今网络中最相关的样式):

个人意见:不要和他们吵架。它们具有良好的默认值,例如,在 rtl/bidi 情况下,并且现在是一致的。重置您认为与您无关的内容,而不是一次全部重置。

于 2019-03-18T06:28:33.277 回答
14

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

于 2012-09-25T12:07:29.910 回答
4

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

于 2014-03-08T17:50:04.623 回答
3

我遇到了同样的问题,因为我的 <div> 之一的边距由浏览器设置。这很烦人,但后来我发现正如大多数人所说,这是一个标记错误。

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

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

我将其包含type在其中并使其如下所示:

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

我的问题解决了。

于 2018-10-01T21:12:42.983 回答
2

我只是想根据我从 Ire Aderinokun那里读到的内容来扩展 @BenM 的回复。因为用户代理样式表提供了有用的默认样式,所以在覆盖它之前要三思。

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

border: none一旦我添加了诸如等样式,问题就消失了。

因此,如果其他人遇到此问题,请确保您明确地覆盖了元素的所有适用的默认用户代理样式,如果您发现它看起来很不稳定,特别是如果您不想完全重置用户代理样式。它对我有用。

于 2020-04-16T15:40:33.980 回答
0

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

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

于 2018-04-20T18:19:19.063 回答
0

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

于 2020-10-09T16:31:33.180 回答
-4

我有一个解决方案。检查这个:

错误

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

正确的

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
于 2020-01-16T17:07:40.563 回答
-7

将以下代码放入您的 CSS 文件中:

table {
    font-size: inherit;
}
于 2016-02-08T10:38:43.180 回答