logo标签列表

用户代理样式表覆盖了我的表格样式？Twitter Bootstrap

csstwitter-bootstrap
67

我正在使用 Twitter Bootstrap。我的问题是表格中的字体大小不正确。由于某种原因，用户代理样式表覆盖了 Bootstrap 表格样式。

在 Twitter Bootstrap 页面（http://twitter.github.com/bootstrap/base-css.html），一切当然都正常工作。

在我的检查器中，我看到以下差异：

我的页面：

CSS style for my page

Twitter Bootstrap页面：

CSS style for twitter bootstrap page

问题在于用户代理样式表覆盖了Twitter Bootstrap的样式。我无法确定为什么我的页面和Twitter Bootstrap页面有所不同。大多数其他CSS都可以正常工作。

我的CSS导入：

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

Twitter Bootstrap页面上的CSS导入：

<link href="assets/css/bootstrap.css" rel="stylesheet">
28
其实我自己找到了答案，但我还是想发布这个问题，因为它可能有助于其他人。我错误地书写了<!DOCTYPE html>标签。所以如果你遇到了这个问题，请确保doctype声明正确！ - Riku
定义重置表格样式 - Krish
1
我想给你一个吻！这绝对节省了我的时间和神经。 - Jarno Lahtinen
我希望早点发现这个...谢谢。 - Silvestre
非常感谢，我已经为此烦恼了一个小时了！ - Owain Reed
可能有点傻，但我一直不明白为什么我的表格都是粗体，直到我注意到我到处使用了<th>而不是<td>。 - Paul
5个回答
121

其实我自己找到了解决方法。我发现我的<!DOCTYPE html>标签写错了。所以，如果你遇到这个问题，请确保文档类型声明正确无误！

2
修复了。仍然非常困惑为什么会这样做。 - Damon
当我尝试将Haml文件转换为Erb格式（Ruby on Rails）时，遇到了这个问题。 Haml自动包含一个带有符号“!!!”的doctype。 - Chris
@Riku 很好的修复。非常感谢，伙计。我已经为此苦恼了两个小时！但这是一个奇怪的错误。 - niranjan94
8
确保 <!DOCTYPE html> 出现在你的 HTML 文件顶部。 - JohnB
@Riku 什么鬼!! 在我的情况下，user agent stylesheet 出现了两次，针对 table 元素... 而且是针对 <!DOCTYPE html> 错误编写的。谢谢 +1 :)!! - albciff
显示剩余4条评论
1
请将docs.css导入您的应用程序中。如果我必须说，您一定已经意识到Twitter Bootstrap Docs正在使用bootstrap.css和自定义的docs.css。尝试从github包中下载它们，然后尝试在不干扰主css的情况下操作docs.css中的表格类别。或者尝试在头部添加DOCTYPE。
<link href="/media/bootstrap/css/docs.css" rel= "stylesheet">
1

我和楼主遇到了相同的问题。我想要漂亮的小字体，但一些用户样式表覆盖了它并使其变成了：

font-size: medium;

当我想要的时候：
font-size:8pt;

我在HTML页面顶部放置了以下内容：
<!DOCTYPE html>

当时一切都很好，但不在顶部声明文档类型是一个不好的习惯。现在所有用户样式表都已经消失了。

要发现CSS中哪些内容被覆盖，检查元素（F12）总是个好主意，您可以即时修改和取消选择属性，直到达到正确的效果，然后用它更新您的CSS文件！

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

1
如果在一开始声明<!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 -->
-1

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

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

这对我很有效。

这不是问题的答案。 - vonbrand
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接