EDIT*** In what instances can user agent styles override custom CSS?
编辑***在哪些情况下用户代理样式可以覆盖自定义CSS?
I have a few styles set on an element on a page of mine, it seems that the user agent stylesheet override my definitions.
我在我的页面上的元素上设置了一些样式,似乎用户代理样式表覆盖了我的定义。
It is happening in Chrome Version 39.0.2171.95 m, Firefox 34.0.5, but not in IE 11.
它发生在Chrome版本39.0.2171.95 m,Firefox 34.0.5中,但不在IE 11中。
I know I don't have any direct styles on that element, but it is my understanding that the user agent stylesheet ONLY takes over if there are absolutely no styles for a particular element. Do inherited styles not count towards that?
我知道我对该元素没有任何直接的样式,但我的理解是,如果特定元素绝对没有样式,则用户代理样式表仅接管。继承的风格不计入那个?
2 个解决方案
#1
9
The answer to the general question is that only property settings set on an element itself are taken into account when deciding which style setting “wins”. For example, if we have just one style sheet that sets font-size: 18px
on the body
element and another style sheet that set font-size: 9px
on all p
elements, then the font size of p
elements is 9px, no matter what the origins of the style sheets are, e.g. whether the latter is just a browser default style sheet. Inheritance plays no role here. This is all described in section Assigning property values, Cascading, and Inheritance of the CSS 2.1 spec.
一般问题的答案是,在决定哪种样式设置“获胜”时,仅考虑元素本身上设置的属性设置。例如,如果我们只有一个样式表设置font-size:18px在body元素上,另一个样式表在所有p元素上设置font-size:9px,那么p元素的字体大小是9px,无论是什么样式表的起源是,例如后者是否只是浏览器默认样式表。继承在这里没有任何作用。这一切都在CSS 2.1规范的分配属性值,级联和继承一节中描述。
Inheritance is considered only after the above “fight” has been resolved. Only then are inheritable properties inherited by elements that have them not set at all.
只有在上述“斗争”解决后,才会考虑继承。只有这样才能继承由未完全设置的元素继承的属性。
The specific question does not provide specific code, but it can be inferred that you have something like this:
具体问题没有提供具体的代码,但可以推断出你有这样的东西:
<style>
body { font-size: 12px; }
</style>
<table>
<tr><td>foo
</table>
bar
Normally this causes both “foo” and “bar” to appear in 12px size. The table cell inherits the size from the table row, which inherits it from the tbody
element, which inherits it from the table, which inherits it from the body
.
通常这会导致“foo”和“bar”以12px大小显示。表单元格继承表行的大小,该表从tbody元素继承它,tbody元素从表继承它,从表继承它。
However, in your case, this chain is broken. The reason is that the browser style sheet has
但是,在您的情况下,此链断开。原因是浏览器样式表有
table { font-size: medium }
which in practice tends to mean 16px. Now the table
element has the property set, so the cell inherits that value.
实际上往往意味着16px。现在table元素具有属性集,因此单元格继承该值。
Browsers do not normally have such a rule in their style sheets. However, in Quirks Mode, most browsers apply the rule. This means that font size is not inherited from body
into tables. This reflects bugs (or oddities) in very old versions of IE and lets legacy page be rendered as they used to be.
浏览器通常在样式表中没有这样的规则。但是,在Quirks模式下,大多数浏览器都应用该规则。这意味着字体大小不会从主体继承到表中。这反映了IE的非常旧版本中的错误(或奇怪),并允许旧页面像以前一样呈现。
If you have unintentionally caused Quirks Mode and do not need it for other purposes, just slap
如果您无意中导致Quirks模式并且不需要将其用于其他目的,请拍打
<!DOCTYPE html>
at the very start of your document. But beware that old pages may get messed up in different ways, if they have been designed in testing conditions that correspond to Quirks Mode.
在文档的最开始。但请注意,如果旧页面设计的测试条件与Quirks模式相对应,则可能会以不同的方式搞乱。
Alternatively, add the following rule into your style sheet:
或者,将以下规则添加到样式表中:
table { font-size: 100% }
This means that a table gets the font size of its parent. (Like in inheritance, but safer.)
这意味着表获取其父级的字体大小。 (比如继承,但更安全。)
#2
-1
use a normalize.css to avoid this issue, if not set none style to an element, he inherit the user agent style.
使用normalize.css来避免这个问题,如果没有将任何样式设置为元素,他将继承用户代理样式。
http://necolas.github.io/normalize.css/
http://necolas.github.io/normalize.css/
#1
9
The answer to the general question is that only property settings set on an element itself are taken into account when deciding which style setting “wins”. For example, if we have just one style sheet that sets font-size: 18px
on the body
element and another style sheet that set font-size: 9px
on all p
elements, then the font size of p
elements is 9px, no matter what the origins of the style sheets are, e.g. whether the latter is just a browser default style sheet. Inheritance plays no role here. This is all described in section Assigning property values, Cascading, and Inheritance of the CSS 2.1 spec.
一般问题的答案是,在决定哪种样式设置“获胜”时,仅考虑元素本身上设置的属性设置。例如,如果我们只有一个样式表设置font-size:18px在body元素上,另一个样式表在所有p元素上设置font-size:9px,那么p元素的字体大小是9px,无论是什么样式表的起源是,例如后者是否只是浏览器默认样式表。继承在这里没有任何作用。这一切都在CSS 2.1规范的分配属性值,级联和继承一节中描述。
Inheritance is considered only after the above “fight” has been resolved. Only then are inheritable properties inherited by elements that have them not set at all.
只有在上述“斗争”解决后,才会考虑继承。只有这样才能继承由未完全设置的元素继承的属性。
The specific question does not provide specific code, but it can be inferred that you have something like this:
具体问题没有提供具体的代码,但可以推断出你有这样的东西:
<style>
body { font-size: 12px; }
</style>
<table>
<tr><td>foo
</table>
bar
Normally this causes both “foo” and “bar” to appear in 12px size. The table cell inherits the size from the table row, which inherits it from the tbody
element, which inherits it from the table, which inherits it from the body
.
通常这会导致“foo”和“bar”以12px大小显示。表单元格继承表行的大小,该表从tbody元素继承它,tbody元素从表继承它,从表继承它。
However, in your case, this chain is broken. The reason is that the browser style sheet has
但是,在您的情况下,此链断开。原因是浏览器样式表有
table { font-size: medium }
which in practice tends to mean 16px. Now the table
element has the property set, so the cell inherits that value.
实际上往往意味着16px。现在table元素具有属性集,因此单元格继承该值。
Browsers do not normally have such a rule in their style sheets. However, in Quirks Mode, most browsers apply the rule. This means that font size is not inherited from body
into tables. This reflects bugs (or oddities) in very old versions of IE and lets legacy page be rendered as they used to be.
浏览器通常在样式表中没有这样的规则。但是,在Quirks模式下,大多数浏览器都应用该规则。这意味着字体大小不会从主体继承到表中。这反映了IE的非常旧版本中的错误(或奇怪),并允许旧页面像以前一样呈现。
If you have unintentionally caused Quirks Mode and do not need it for other purposes, just slap
如果您无意中导致Quirks模式并且不需要将其用于其他目的,请拍打
<!DOCTYPE html>
at the very start of your document. But beware that old pages may get messed up in different ways, if they have been designed in testing conditions that correspond to Quirks Mode.
在文档的最开始。但请注意,如果旧页面设计的测试条件与Quirks模式相对应,则可能会以不同的方式搞乱。
Alternatively, add the following rule into your style sheet:
或者,将以下规则添加到样式表中:
table { font-size: 100% }
This means that a table gets the font size of its parent. (Like in inheritance, but safer.)
这意味着表获取其父级的字体大小。 (比如继承,但更安全。)
#2
-1
use a normalize.css to avoid this issue, if not set none style to an element, he inherit the user agent style.
使用normalize.css来避免这个问题,如果没有将任何样式设置为元素,他将继承用户代理样式。
http://necolas.github.io/normalize.css/
http://necolas.github.io/normalize.css/