什么是用户代理样式表?

我正在谷歌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;
}

这些新样式的字体大小影响了我的设计。有没有办法强制我的样式表，如果可能的话，完全覆盖Chrome的默认样式表?

当前回答

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

我有一个愚蠢的错误，按钮元素在Chrome中看起来不正确。我对它进行了部分设计，因为我不想让它看起来像一个传统的按钮。但是，我省略了像border, border-color等样式元素。所以Chrome开始介入，提供它认为我缺少的部分。

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

因此，如果其他人也有这个问题，请确保在注意到某个元素看起来不稳定时显式覆盖了所有适用的默认用户代理样式，特别是在您不想完全重置用户代理样式的情况下。这对我很管用。

2020-04-16 15:40:33

其他回答

我也遇到了同样的问题，这是因为我正在使用非语义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-09 16:31:33

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

铬(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 Gecko (Firefox): https://searchfox.org/mozilla-central/source/layout/style/res/html.css 宁静:https://github.com/SerenityOS/serenity/blob/master/Userland/Libraries/LibWeb/CSS/Default.css # L4 Mozilla伺服:https://github.com/servo/servo/blob/master/resources/user-agent.css#L9

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

2019-03-18 06:28:33

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

<!DOCTYPE html>
<html>...

2015-08-13 07:45:56

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

错误

<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-16 17:07:40

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

2015-10-22 14:11:03

什么是用户代理样式表?

推荐文章

最新文章

标签