CSS 为什么用户代理样式表会覆盖我的样式?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11348727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does user agent stylesheet override my styles?
提问by Joe
I want a font-size of a 11, but Chrome and Firefox are giving me 16. When I examine the element in Chrome I see and look at the computed property I see:
我想要 11 的字体大小,但 Chrome 和 Firefox 给了我 16。当我检查 Chrome 中的元素时,我看到并查看了我看到的计算属性:
font-size: 16px;
table - medium user agent stylesheet
Style Attribute - 11px
table - medium user agent stylesheet
.v11gray - 11px style.css
Under computed styles in Firefox I get:
在 Firefox 中的计算样式下,我得到:
font-size: 16px
TABLE[0].style → 11px element
.v11gray → 11px style.css:19
The last three lines are struck out. Why is my css rule being overridden? Are there steps I can take to find out?
最后三行被删除。为什么我的 css 规则被覆盖?我可以采取哪些步骤来找出答案?
回答by kburke
This is an outside shot without your code, but the solution when I had the exact same problem. My DOCTYPE statement had gotten fouled up by an errant keystroke, as described in this question. You might want to inspect it visually and/or validate.
这是没有您的代码的外部镜头,但是当我遇到完全相同的问题时的解决方案。如本问题所述,我的 DOCTYPE 语句被错误的击键搞砸了。您可能希望对其进行目视检查和/或验证。
回答by Philll_t
This might sound odd, but it helps to check (especially if you aren't using an IDE or one that doesn't do validation on your CSS). You might want to make sure that you have a ;
and not a :
at the end of your:style;
line. Because at a glance, in the inspector the syntax appears to be correct but isn't. So your user agent stylesheet overwrites it. It's one of those "make sure your printer is plugged in" checks. It happens to all of us every once in a while.
这听起来可能很奇怪,但它有助于检查(特别是如果您不使用 IDE 或不对 CSS 进行验证的 IDE)。您可能希望确保在行尾有 a;
而不是 a 。因为乍一看,在检查器中,语法似乎是正确的,但实际上并非如此。所以你的用户代理样式表会覆盖它。这是“确保您的打印机已插入”检查之一。它每隔一段时间就会发生在我们所有人身上。:
your:style;