什么是用户代理样式表

乐神奇2020-03-18

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

路易Tony2020/03/18 16:14:43

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

table {
    font-size: inherit;
}

小胖Sam2020/03/18 16:14:43

我有解决办法检查此：-

错误

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

正确

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

HarryItachi蛋蛋2020/03/18 16:14:43

每种浏览器都提供一个默认样式表，称为用户代理样式表，以防HTML文件未指定样式表。您指定的样式将覆盖默认设置。由于您尚未为表格元素的框指定值，因此已应用默认样式

小小猿村村2020/03/18 16:14:43

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

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

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

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

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

我的问题解决了。

希望对您有所帮助。

Tony西门古一2020/03/18 16:14:43

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

壁虎（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情况下，并且如今是一致的，请重置与您无关的内容，而不是一次全部重置。

老丝GO2020/03/18 16:14:42

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

小小逆天2020/03/18 16:14:42

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

从规格...

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

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

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

L西里2020/03/18 16:14:42

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

泡芙Gil2020/03/18 16:14:42

Regarding the concept “user agent style sheet”, consult section Cascade in the CSS 2.1 spec.

User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this.

So if you think you have a problem with a user agent style sheet, then you really have a problem with your markup, or your style sheet, or both (about which you wrote nothing).

西门泡芙Jim2020/03/18 16:14:42

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

<!DOCTYPE html>
<html>...

斯丁飞云阳光2020/03/18 16:14:42

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

樱神无2020/03/18 16:14:42

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer