CSS 用户代理样式表覆盖了我的表格样式？推特引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9308234/
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
User agent stylesheet overriding my table style? Twitter Bootstrap
提问by Riku
I'm using twitter bootstrap. My problem is that font-sizes in tables are wrong. For some reason the User Agent stylesheet is overriding the bootstrap table styles.
我正在使用推特引导程序。我的问题是表格中的字体大小是错误的。出于某种原因，用户代理样式表覆盖了引导表样式。
On the twitter bootstrap page (http://twitter.github.com/bootstrap/base-css.html) everything is of course working correctly.
在 twitter bootstrap 页面 ( http://twitter.github.com/bootstrap/base-css.html) 上，一切正常。
In my inspector I see the following difference:
在我的检查员中，我看到以下区别：
My page:
我的页面：
The twitter bootstrap page:
推特引导页面：
So definitely the problem is that the user agent stylesheet is overriding the bootstrap styles.
所以肯定的问题是用户代理样式表覆盖了引导程序样式。
I haven't been able to figure out why this is different on my page and the twitter bootstrap page.
我一直无法弄清楚为什么这在我的页面和 Twitter 引导页面上有所不同。
Most of the other CSS is working fine.
大多数其他 CSS 工作正常。
My css import:
我的 css 导入：
<link href="/media/bootstrap/css/bootstrap.css" rel= "stylesheet">
CSS import on twitter bootstrap page:
推特引导页面上的 CSS 导入：
<link href="assets/css/bootstrap.css" rel="stylesheet">
回答by Riku
I actually figured this out myself. I had the <!DOCTYPE html>tag wrongly written. So if you have this problem make sure the doctype declaration is correct!
其实我自己想通了。我把<!DOCTYPE html>标签写错了。因此，如果您遇到此问题，请确保 doctype 声明是正确的！
回答by Ali Gajani
Please import the docs.css into your application as well. If I must say so, you must have realized that the Twitter Bootstrap Docsare using bootstrap.css and a custom docs.css. Try doing, which you can download from the github package. Then, try playing around with the table classes in docs. css without messing with the master css. Or try adding DOCTYPE in headers.
请将 docs.css 也导入到您的应用程序中。如果我必须这样说，您一定已经意识到Twitter Bootstrap Docs正在使用 bootstrap.css 和自定义 docs.css。尝试这样做，您可以从 github 包中下载。然后，尝试使用文档中的表类。css 而不会弄乱主 css。或者尝试在标题中添加 DOCTYPE。
<link href="/media/bootstrap/css/docs.css" rel= "stylesheet">
回答by bgashler1
If declaring <!DOCTYPE html>in the very beginning doesn't work, then it's probably not your user-agent style sheet casuing it. It may be Bootstrap's style sheet overriding your styles (I've had this problem). Make sure your style sheet is linked to afterBootstrap's style sheet in your HTML.
如果<!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 -->
回答by Rmj86
I had the same issue as the OP. I wanted lovely small text and some user stylesheet was overiding it and putting:
我和 OP 有同样的问题。我想要可爱的小文本，一些用户样式表覆盖它并放置：
font-size: medium;
When I wanted:
当我想要：
font-size:8pt;
I placed the following at the top of my HTML page:
我在 HTML 页面的顶部放置了以下内容：
<!DOCTYPE html>
All was good then, a bad habit to get into to not declare doctype at the top. All user stylesheets have now gone.
一切都很好，这是一个坏习惯，不要在顶部声明 doctype。所有用户样式表现在都消失了。
To discover what is overriding what on your CSS it is always a good idea to inspect element (F12) and you can modify and untick attributes on the fly until you get to right, then update your CSS file with it!
要发现什么覆盖了 CSS 上的内容，检查元素 (F12) 始终是一个好主意，您可以动态修改和取消勾选属性，直到正确为止，然后用它更新您的 CSS 文件！
However if you do have a user stylesheet issue, these values will be locked.
但是，如果您确实有用户样式表问题，这些值将被锁定。
回答by Ravikumar K
Check whether your CSS is called or not in browser dev tools (press F12) under network column.
在网络栏下的浏览器开发工具（按 F12）中检查您的 CSS 是否被调用。
If it is not called, use your style sheets with1 rel="stylesheet" type="text/css".
如果未调用，请使用带有 1 的样式表rel="stylesheet" type="text/css"。
It worked for me.
它对我有用。
