为什么用户代理样式会覆盖我的样式？

Question

我希望字体大小为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

在 Firefox 的计算样式中，我得到：

font-size: 16px
   TABLE[0].style → 11px    element
   .v11gray → 11px  style.css:19

最后三行被划掉了。我的css规则为什么会被覆盖？我可以采取哪些步骤来找出原因？

- Joe

---

有一个 jsfiddle 吗？代码示例非常有帮助。 - starbeamrainbowlabs

请展示您的CSS包含文件。您需要确保主样式表最后被包含，否则插件和其他CSS样式表可能会覆盖一些选择器。 - Lowkase

这是我在现网站上拥有的一份副本。如果我知道如何重新创建这个问题，我会解决它。 - Joe

@Joe，你需要发一份完整的示例或一个URL。现在不清楚元素是什么以及应用了哪些样式表。 - Jukka K. Korpela

我同意@Jukka的观点，你的帖子不够详细，也没有提供正确的来源，这使我们无法评估你所遇到的错误与你想要实现的目标之间的差异。 - Mike Kormendy

一个例子 - 对于 textarea 标签 - 在 CSS 中确保不指定宽度，并且在 textarea 标签中也指定 cols，因为你可能会遇到“用户代理样式表”问题。寻找冲突的规则并尝试消除它们。 - Xofo

Answer 1

我也遇到了和你类似的问题，虽然这个解决方案和你的代码无关。我的DOCTYPE语句因为一个错误的按键而出现问题，就像这个问题描述的那样。你可能需要通过目视或验证来检查它。

- kburke

---

@kburke - 完美解决了！如此简单的修复！ - Mitch Dempsey

+1 帮助我识别了在<!DOCTYPE>之前的额外<。 - AdRock

谢谢。我在我们的Zen Cart系统中的一个“header_php.php”文件中放置了一行“<link rel =”stylesheet“href =”blah / css / FontAwesome.css“>”。这些在正常的HTML头代码之前输出，因此“<link>”标记出现在“<! DOCTYPE html>”行之前，使浏览器忽略它，因此这一页突然出现了“table-medium”的计算样式表格文本，破坏了它们的字体大小。当我查看页面源代码并将其与其他有效页面进行比较时，问题变得明显。 - Neek

如果在doctype之前打印出东西，样式也会失败。我有一些PHP跟踪被回显到doctype之前，我必须将其删除以进行适当的样式设置。 - Dan H

我竟然忘记了文档类型声明。谢谢！ - user3745735

Answer 2

这可能听起来有些奇怪，但它有助于检查（特别是如果您没有使用IDE或者使用的IDE不会验证您的CSS）。您可能需要确保在your:style;行的末尾有一个;而不是:。因为乍一看，在检查器中语法似乎是正确的，但实际上并不是。所以您的用户代理样式表会覆盖它。这就像“确保打印机已插好电源”一样的检查。我们每个人都会偶尔遇到这种情况。

- Philll_t