覆盖我的表格样式的用户代理样式表？推特引导答案

【问题标题】：User agent stylesheet overriding my table style? Twitter Bootstrap覆盖我的表格样式的用户代理样式表？推特引导
【发布时间】：2012-03-07 16:06:41
【问题描述】：

我正在使用 twitter 引导程序。我的问题是表格中的字体大小是错误的。由于某种原因，用户代理样式表覆盖了引导表样式。

在 twitter 引导页面 (http://twitter.github.com/bootstrap/base-css.html) 上，当然一切正常。

在我的检查员中，我看到以下区别：

我的页面：

推特引导页面：

所以问题肯定是用户代理样式表覆盖了引导样式。

我无法弄清楚为什么这在我的页面和 twitter 引导页面上有所不同。

大多数其他 CSS 工作正常。

我的css导入：

<link href="/media/bootstrap/css/bootstrap.css" rel= "stylesheet">

Twitter 引导页面上的 CSS 导入：

<link href="assets/css/bootstrap.css" rel="stylesheet">

【问题讨论】：

我实际上自己想出了这个问题，但我认为无论如何我都会发布这个问题，因为它可能会帮助其他人。我的标签写错了。所以如果你有这个问题，请确保 doctype 声明是正确的！
定义表格的重置样式
我想给你一个吻！这绝对节省了我的时间和精力。
我希望我早点找到这个......谢谢
非常感谢，在过去的一个小时里，我一直在扯头发！！

标签： css twitter-bootstrap

【解决方案1】：

请将 docs.css 也导入到您的应用程序中。如果我必须这么说，您一定已经意识到 Twitter Bootstrap 文档 正在使用 bootstrap.css 和自定义 docs.css。尝试做，你可以从 github 包下载。然后，尝试使用 docs 中的表类。 css 而不会弄乱主 css。或者尝试在标题中添加 DOCTYPE。

<link href="/media/bootstrap/css/docs.css" rel= "stylesheet">

【讨论】：

【解决方案2】：

其实我自己也想通了。我写错了<!DOCTYPE html> 标签。所以如果你有这个问题，请确保 doctype 声明是正确的！

【讨论】：

确实修复了。仍然完全令人困惑为什么会这样做
我在尝试将 haml 文件转换为 erb 格式（ruby on rails）时遇到了这个问题。 Haml 自动包含一个带有符号 !!! 的文档类型。
@Riku 很棒的修复。非常感谢老兄。已经让我头疼了 2 个小时！ .. 但是奇怪的错误。
是的，确保 <!DOCTYPE html> 出现在 HTML 的顶部。
@Riku WTF！！在我的情况下，user agent stylesheet 出现两次 table 元素...一个是 <!DOCTYPE html> 不正确的写。谢谢 +1 :)!!

【解决方案3】：

如果一开始就声明<!DOCTYPE html> 不起作用，那么可能不是您的用户代理样式表导致了它。它可能是 Bootstrap 的样式表覆盖了您的样式（我遇到了这个问题）。确保您的样式表在 HTML 中链接到 Bootstrap 的样式表。

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystylesheet.css" rel="stylesheet"> <!-- Your custom style sheet goes after Bootstrap's -->

【讨论】：

【解决方案4】：

在网络列下的浏览器开发工具（按 F12）中检查您的 CSS 是否被调用。

如果没有调用，请使用带有 1 rel="stylesheet" type="text/css" 的样式表。

它对我有用。

【讨论】：

这不是问题的答案。

【解决方案5】：

我遇到了与 OP 相同的问题。我想要可爱的小文本，一些用户样式表覆盖它并放置：

font-size: medium;

当我想要的时候：

font-size:8pt;

我在 HTML 页面的顶部放置了以下内容：

<!DOCTYPE html>

那时一切都很好，养成了不在顶部声明 doctype 的坏习惯。现在所有的用户样式表都消失了。

要发现什么覆盖了 CSS 上的内容，检查元素 (F12) 始终是一个好主意，您可以随时修改和取消勾选属性，直到正确为止，然后用它更新您的 CSS 文件！

但是，如果您确实有用户样式表问题，这些值将被锁定。

【讨论】：