Question

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

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

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

我知道我在该元素上没有任何直接样式，但我理解，如果特定元素绝对没有样式，则用户代理样式表仅接管。继承的风格不算数吗？

enter image description here

Answer 1

一般问题的答案是，在决定哪种样式设置“获胜”时，仅考虑元素本身上设置的属性设置。例如，如果我们只有一个样式表在font-size: 18px元素上设置body，而另一个样式表在所有font-size: 9px元素上设置p，那么字体大小为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 }

实际上往往意味着16px。现在table元素已设置属性，因此单元格继承该值。

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

如果您无意中导致Quirks模式并且不需要将其用于其他目的，请点击

<!DOCTYPE html>

在您的文档的最开始。但请注意，如果旧页面设计的测试条件与Quirks模式相对应，可能会以不同的方式搞乱。

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

table { font-size: 100% }

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

Answer 2

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

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

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

2 个答案: