Html Chrome 用户代理样式表覆盖了我的网站样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7466404/
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
Chrome user agent stylesheet overwriting my site style
提问by TK Gospodinov
I have the following CSS that styles the link on one of my pages:
我有以下 CSS 样式为我的其中一个页面上的链接设置样式：
a:link, a:visited, a:active {
color: white;
text-decoration: none;
font-weight: bold;
}
However, when I load it, they appear blue in Chrome and white in Firefox. The Chrome dev tools reveal that my style supposedly overwrites the user agent stylesheet:
但是，当我加载它时，它们在 Chrome 中显示为蓝色，在 Firefox 中显示为白色。Chrome 开发工具显示我的样式可能会覆盖用户代理样式表：
Why is it not showing correctly? I tried setting the charset at the top of my stylesheet:
为什么显示不正确？我尝试在样式表顶部设置字符集：
@charset "UTF-8";
html, body {
width: 100%;
height: 100%;
margin: 0;
font: 11px "Lucida Grande", Arial, Sans-serif;
}
a:link, a:visited, a:active {
color: white;
text-decoration: none;
font-weight: bold;
}
input[type=email], input[type=password] {
display: block;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid #ACE;
font-size: 13px;
margin: 0 0 5px;
padding: 5px;
width: 203px;
}
But it didn't help. My stylesheet is linked in the head with:
但它没有帮助。我的样式表在头部链接到：
<link href="/assets/global.css?body=1" media="screen" rel="stylesheet"
type="text/css">
And the html code for the links:
以及链接的 html 代码：
<a href="/users/sign_in">Sign in</a>
<a href="/users/password/new">Forgot your password?</a>
<a href="/users/auth/facebook">Sign in with Facebook</a>
This is what they look like in Chrome (13.0.782) - incorrect:
这是它们在 Chrome (13.0.782) 中的样子 - 不正确：
This is what they look like in Firefox - correct:
这就是它们在 Firefox 中的样子 - 正确：
It looks like the user agent stylesheet is overwriting my style. Why?
看起来用户代理样式表正在覆盖我的样式。为什么？
采纳答案by TK Gospodinov
Vonkly helped identify the issue. I went digging through all my stylesheets and I found a typo, sort of, in one of them - it was missing the parent element when defining the link style for the header, so instead of
Vonkly 帮助确定了问题。我翻遍了我所有的样式表，发现其中一个有错别字 - 在定义标题的链接样式时缺少父元素，所以不是
header a:link, header a:visited {
...
}
I had
我有
header a:link, a:visited {
...
}
so it was overriding the style I defined for the links in the body. I must have missed it while reviewing my stylesheets the first time around.
所以它覆盖了我为正文中的链接定义的样式。我一定是在第一次查看我的样式表时错过了它。
Thanks for your comments, everybody!
谢谢大家的评论！
回答by Ahmad Muzakki
I don't know why but I add this <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">before <html>and it solved
我不知道为什么，但我<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">之前添加了它<html>并解决了
回答by barbolo
Just add <!DOCTYPE html>before the <html>tag.
只需<!DOCTYPE html>在<html>标签前添加即可。
回答by Vipin Chaudhary
I was having same kind of problem, i my case my some classes are forcefully settled to display : none
我遇到了同样的问题，我的情况是我的一些课程被强制显示：无
After 30/40 min i looked up on browser extensions , and found out all these was happening due to AD Blocker.
30/40 分钟后，我查看了浏览器扩展，发现所有这些都是由于AD Blocker而发生的。
so if any above solution does'nt work for you, then try this as well once if you have this kind of browser extension.
因此，如果上述任何解决方案对您不起作用，那么如果您有这种浏览器扩展程序，也可以尝试一次。
回答by tony gil
The user agent stylesheet only kicks in if your css neglects to define a property for a tag. Consider that you might have a typo in your css style.
仅当您的 css 忽略为标签定义属性时，用户代理样式表才会启动。考虑到您的 css 样式中可能有拼写错误。
Chances are that, if you put the tag declaration at the beginning of the css file and it works, that you have an error in your css.
很有可能，如果您将标签声明放在 css 文件的开头并且它有效，那么您的 css 就会出错。
Try running your css thru CSS Lint
尝试通过CSS Lint运行您的 css
I had this persistent problem and discovered a mistake in my css.
我遇到了这个持续存在的问题，并在我的 css 中发现了一个错误。
回答by tony gil
Use the general css anchor style a:
使用一般的 css 锚样式a：
a {
color: white;
text-decoration: none;
font-weight: bold;
}
Also, you don't need to set the charset in your css file. I would remove that.
此外，您不需要在 css 文件中设置字符集。我会删除它。
The charset shouldbe set in the HTTP header, which is where it belongs.
字符集应该在它所属的 HTTP 标头中设置。
