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


当前回答

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

从说明书来看……

用户代理的默认样式表应该以满足文档语言的一般表示期望的方式来表示文档语言的元素。~瀑布。

有关用户代理的详细信息,请参见用户代理。

其他回答

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

铬(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情况下,它们具有良好的默认值,并且现在是一致的。重置你看到的与你无关的东西,而不是一次全部重置。

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

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

一些浏览器使用自己的方式读取.css文件。 所以正确的解决方法是: 如果您直接在.html源代码中键入命令行,这将击败.css文件,以这种方式,您直接告诉浏览器要做什么,并且浏览器处于不从.css文件读取命令的位置。 请记住,写在.html文件中的命令比写在.css文件中的命令更强大。

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

错误

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

正确的

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

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