什么是用户代理样式表

Question

什么是用户代理样式表

我正在使用谷歌浏览器的网页.它使用以下样式正确显示.

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

Run Code Online (Sandbox Code Playgroud)

重要的是要注意我没有定义这些样式.在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;
}

Run Code Online (Sandbox Code Playgroud)

在font-size这些新的风格被扰乱我的设计.有没有办法强制我的样式表,如果可能的话,完全覆盖Chrome的默认样式表？

Answer 1

Oli*_*ton 235

什么是目标浏览器？不同浏览器设置不同的默认CSS规则.尝试包括reset.css或normalise.css(Google用于任何一个或"重置与规范化"以查看差异)以删除这些默认值.或者设置自己的style.css

我总是在每个项目之前重置/规范化我的CSS,这样你就可以在浏览器中拥有一个"几乎"级别的字段.我从来没有听说过这样的负面影响,我敢肯定,如果你快速浏览一下谷歌,你会发现它是推荐的. (19认同)
这不是答案...... @Sebas添加`<!DOCTYPE>`是正确的 (10认同)
即使重置/规范化可能有所帮助,但它并没有真正回答用户代理样式表发生变化的原因？我有同样的问题,他们的UA样式对于我用于SEO的预渲染页面变得不同.关于它为何发生变化的想法？ (7认同)
查看Chrome默认设置到网页的内容:http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css (5认同)
重置样式可能会导致表单字段产生奇怪的结果,特别是字段边框或类型="文件"等多部分元素. (2认同)

Answer 2

Jes*_*ind 121

如果<!DOCTYPE>您的html中缺少,您可能会遇到浏览器优先于自定义样式表的"用户代理样式表".添加doctype可以解决此问题.

我启用了<!DOCTYPE html>但仍需要规范化. (6认同)
添加 <!DOCTYPE> 解决了我遇到的一个非常奇怪的 tr/td 垂直对齐问题。感谢您的回答。 (4认同)
这是一个很好的提示。您节省了我一些研究时间。值得一提的是，就我而言，我有该doctype声明，但之前有一个脚本。看起来DOCTYPE必须首先出现在页面中才能考虑在内。 (2认同)
这很挑剔，但是<！DOCTYPE html>为我解决了这个问题。 (2认同)