Chrome 用户代理样式表覆盖我的网站样式

Question

我有以下 CSS 来设置我的页面之一上的链接样式：

a:link, a:visited, a:active {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

但是，当我加载它时，它们在 Chrome 中显示为蓝色，在 Firefox 中显示为白色。 Chrome 开发工具显示我的样式据称会覆盖用户代理样式表：

为什么它无法正确显示？我尝试在样式表顶部设置字符集：

@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;
}

但这没有帮助。我的样式表在头部链接为：

<link href="/assets/global.css?body=1" media="screen" rel="stylesheet"
type="text/css">

以及链接的 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>

这是它们在 Chrome (13.0.782) 中的样子 - 不正确：

这是它们在 Firefox 中的样子 - 正确：

看起来就像用户代理样式表覆盖了我的样式。为什么？

Answer 1

我不知道为什么，但我添加了这个
在 之前解决了

Answer 2

Vonkly 帮助确定了这个问题。我深入研究了所有样式表，发现其中一个有一个拼写错误 - 在定义标题的链接样式时缺少父元素，所以

header a:link, header a:visited {
...
}

它

header a:link, a:visited {
...
}

取代了我定义的样式正文中的链接。我一定是在第一次检查样式表时错过了它。

谢谢大家的评论！

Answer 3

只需在 标记之前添加 即可。

Answer 4

我遇到了同样的问题，就我而言，我的一些类被强制显示：无

30/40 分钟后，我查找浏览器扩展，发现所有这些都是由于 AD 拦截器。

因此，如果上述任何解决方案都不适合您，那么如果您有此类浏览器扩展程序，也请尝试一次。

Answer 5

仅当您的 CSS 忽略为标签定义属性时，用户代理样式表才会生效。考虑一下您的 css 样式可能有拼写错误。

如果您将标签声明放在 css 文件的开头并且它有效，则很可能您的 css 中有错误。

尝试通过 CSS Lint 运行你的 css

我遇到了这个持续存在的问题，并发现我的 css 中有一个错误。

Answer 6

在浏览器为您设置边距之前强制您设置边距

body {
    margin: 0%;
}

Answer 7

使用通用的 css 锚点样式 a：

a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

此外，您不需要在 css 文件中设置字符集。我会删除它。

字符集应该在HTTP标头中设置，这是它所属的位置。