用户代理样式表覆盖我自己的样式答案

【问题标题】：user agent stylesheet override my own styles用户代理样式表覆盖我自己的样式
【发布时间】：2015-03-07 00:11:47
【问题描述】：

编辑*** 在什么情况下用户代理样式可以覆盖自定义 CSS？

我在我的页面上的一个元素上设置了一些样式，似乎用户代理样式表覆盖了我的定义。

它发生在 Chrome 版本 39.0.2171.95 m、Firefox 34.0.5 中，但不在 IE 11 中。

我知道我在该元素上没有任何直接样式，但我的理解是用户代理样式表只有在特定元素绝对没有样式时才会接管。继承的样式不计算在内吗？

【问题讨论】：

您应该包含足够的 HTML 和 CSS 作为文本，以重现问题。
我必须发布 CSS 和 HTML 页面。我想通过简单地按照 Chrome 开发人员工具发布计算出的样式，您将能够看到有应用于元素的样式，但它们被用户代理样式覆盖。我想我应该在我的问题中发布“在什么情况下用户代理样式可以覆盖自定义 CSS？” - 我现在就这么做。
不，您应该发布一个minimal 文档来实际演示该问题。但在我下面的回答中，我认为我已经重建了一个简单的案例。而且你不应该把一个问题变成一个完全不同的问题，或者当你有一个特定的问题时问一个一般性的问题。一般问题通常被关闭为过于宽泛（即使不是，对它们的答案也可能无法解决您的实际问题）。
下面的答案很好。似乎回答了最初的问题 - “继承的风格不计入这一点吗？”这与修订后的问题非常接近 - “在什么情况下用户代理样式可以覆盖自定义 CSS？”。谢谢你向我解释这个。我了解更具体的 CSS 规则具有优先权，但我想我在查找用户代理样式表的主题时误解了某些资源。

标签： html css rendering user-agent

【解决方案1】：

使用 normalize.css 来避免这个问题，如果没有为元素设置 none 样式，他会继承用户代理样式。

http://necolas.github.io/normalize.css/

【讨论】：

是的，我知道这一点。但是我已经将样式应用于元素。我的问题是为什么它会覆盖应用于元素的样式。

【解决方案2】：

一般问题的答案是，在决定哪种样式设置“胜出”时，只会考虑元素本身的属性设置。例如，如果我们只有一个样式表在body 元素上设置font-size: 18px，而另一个样式表在所有p 元素上设置font-size: 9px，那么p 元素的字体大小是9px，没有不管样式表的起源是什么，例如后者是否只是浏览器默认样式表。继承在这里不起作用。这在 CSS 2.1 规范的Assigning property values, Cascading, and Inheritance 部分都有描述。

只有在上述“斗争”解决后才考虑继承。只有这样，可继承的属性才会被未设置的元素继承。

具体问题没有提供具体代码，但可以推断你有这样的情况：

 <style>
   body { font-size: 12px; }
 </style>
 <table>
   <tr><td>foo
 </table>
 bar

通常这会导致“foo”和“bar”都以 12px 大小出现。表格单元格从表格行继承大小，该行从tbody 元素继承它，该元素从该表格继承它，该表格从body 继承它。

但是，在您的情况下，这条链已断开。原因是浏览器样式表有

 table { font-size: medium }

这在实践中往往意味着 16 像素。现在table 元素已设置属性，因此单元格继承了该值。

浏览器的样式表中通常没有这样的规则。但是，在Quirks Mode 中，大多数浏览器都应用了该规则。这意味着字体大小不会从body 继承到表格中。这反映了非常旧的 IE 版本中的错误（或怪异），并让旧版页面像以前一样呈现。

如果你无意中引起了Quirks Mode，并且不需要它用于其他目的，那就拍吧

<!DOCTYPE html>

在文档的开头。但请注意，如果旧页面是在与 Quirks 模式相对应的测试条件下设计的，它们可能会以不同的方式被弄乱。

或者，将以下规则添加到您的样式表中：

table { font-size: 100% }

这意味着表格获取其父级的字体大小。（类似于继承，但更安全。）

【讨论】：