什么是用户代理样式表？

499

我正在使用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的默认样式表？

css google-chrome

— 卡皮尔·沙玛（Kapil Sharma）
source

2

chrome：如何关闭用户代理样式表设置？

— givanse 2014年

7

还要注意，在Chrome（51）上，当您没有文档类型声明时，只会获得这两个表条目。否则，您只会得到第二个。

— 约翰

在更多工具中清除Chrome缓存->清除浏览数据

— Doford

2

相关帖子在这里。了解用户代理（或浏览器）样式表与用户样式表和作者样式表的不同之处将有助于轻松地概念化事物。

— RBT

251

目标浏览器是什么？不同的浏览器设置不同的默认CSS规则。尝试包括CSS重置，例如meyerweb CSS重置或normalize.css，以删除那些默认值。Google通过“ CSS重置与归一化”来查看差异。

— 奥利弗·米林顿（Oliver Millington）
source

19

我总是在每个项目之前都对CSS进行重置/归一化，这样您就可以在浏览器中拥有“几乎”级别的字段。我从来没有听说过负面的“副作用”，我敢肯定，如果您对Google有个快速的了解，就会发现它是推荐的。

— 奥利弗·米林顿

2

重置样式可能会导致表单域出现奇怪的结果，尤其是在域边界或诸如type =“ file”之类的多部分元素周围。

— 好好对待您的Mod

7

尽管重设/规范化可能会有所帮助，但实际上并不能回答为什么用户代理样式表正在更改的问题？我有一个相同的问题，即在我用于SEO的预渲染页面上，UA样式变得不同。有什么想法为什么会改变？

— Yaron 2015年

5

查看Chrome默认设置为网页的内容：trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

— Santosh Kumar，

10

这不是答案...添加<!DOCTYPE>正确的@Sebas

— Amit Shah

140

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

— 杰斯珀·迈金德（Jesper Mygind）
source

6

这是一个很好的提示。您节省了我一些研究时间。值得一提的是，就我而言，我有该doctype声明，但之前有一个脚本。看起来DOCTYPE必须首先出现在页面中才能考虑在内。

— 塞巴斯2015年

3

添加<！DOCTYPE>解决了我遇到的一个非常奇怪的tr / td垂直对齐问题。感谢您的回答。

— 拉尔夫Tee

3

这很挑剔，但是<！DOCTYPE html>为我解决了这个问题。

— Steve Zelaznik '18

8

我启用了<！DOCTYPE html>，但仍必须进行标准化。

— antikbd

1

@ChrisMorgan引用了已链接到的规范：“出于遗留原因，必须使用DOCTYPE。如果省略，浏览器将使用与某些规范不兼容的另一种渲染模式。在文档中包含DOCTYPE可确保浏览器进行尽最大努力遵循相关规范”。在理想的情况下，不需要DOCTYPE。但是，声称答案是“不正确”是非常大胆的恕我直言，特别是考虑到投票数。

— Jesper Mygind

104

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

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

因此，如果您认为用户代理样式表有问题，那么您的标记或样式表或两者都确实有问题（关于它您什么也没写）。

— Jukka K.Korpela
source

@givanse，不，如果不覆盖用户代理样式表效果，则示例标记也不例外。它将被解析为一个li元素，其中包含两个ul仅包含文本内容的元素；它们由用户代理样式表设置样式，但是可以覆盖此样式。（标记是否无效取决于上下文和HTML版本；但这不会影响样式。）

— Jukka K. Korpela 2014年

@givanse，该问题与“什么是用户样式表”问题无关。如果您认为问题很重要，请将其发布为新问题，并提供足够的详细信息。但是，jsfiddle中的项目符号只是li元素的项目符号，并且样式表不会覆盖它。

— Jukka K. Korpela 2014年

47

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

<!DOCTYPE html>
<html>...

— 丹尼尔
source

8

您能解释一下它应该如何工作吗？HTML 5如何与未定义的样式相关联？我会确认，但您还有准备提要的小提琴吗？

— 卡皮尔·夏尔马

28

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

从规格...

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

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

— 肯尼斯·斯托达德
source

15

回答标题中的问题，用户代理样式表是什么，浏览器中的默认样式集：这是其中的一些（也是当今网络中最相关的样式）：

壁虎（Firefox）：https : //dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
铬（Chrome）：https : //chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit（Safari）：https：//trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

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

— 易卜拉欣·比亚戈维
source

12

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

— 本
source

4

某些浏览器使用自己的方式读取.css文件。因此，这是正确的解决方法：如果直接在.html源代码中键入命令行，则会击败.css文件，这样，您就直接告诉浏览器该怎么做，并且浏览器处于无法读取的位置.css文件中的命令。请记住，.html文件中写入的命令比.css中的命令更强大。

— rollin_jeksun
source

1

我遇到的问题与我的<div>之一的浏览器设置的边距相同。这很烦人，但后来我想出了大多数人所说的，这是标记错误。

我返回并检查了<head>部分，我的CSS链接如下所示：

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

我将type其包含在内，并使其如下所示：

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

我的问题解决了。

— 阿皮·夏尔马
source

0

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

由于您尚未为表格元素的框指定值，因此已应用默认样式。

— 第一评论员
source

0

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

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

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

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

— 布伦特·米勒
source

这不应该是评论而不是答案吗？

— Peter Mortensen

@PeterMortensen是的，但我不能发表评论-信誉不足。

— 布伦特·米勒

-1

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

错误

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

正确

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

— 温卡尔·钱德尔（Vinkal Chandel）
source

2

请进行编辑以说明其工作原理及其帮助。

— Yunnosch

-6

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

table {
    font-size: inherit;
}

— 斯里坎特
source

2

这实际上并没有为该帖子添加任何新内容。已经有一个公认的答案，以及其他5个答案，因此请不要发布最新答案。

— 卡斯珀·李