Chrome 用户代理样式表覆盖了我的网站样式 [英] Chrome user agent stylesheet overwriting my site style

问题描述

我有以下 CSS 样式可以为我的一个页面上的链接设置样式:

I have the following CSS that styles the link on one of my pages:

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

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

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:

为什么显示不正确?我尝试在样式表顶部设置字符集:

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">

以及链接的 html 代码:

And the html code for the links:

<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) 中的样子 - 不正确:

This is what they look like in Chrome (13.0.782) - incorrect:

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

This is what they look like in Firefox - correct:

看起来用户代理样式表覆盖了我的样式.为什么?

It looks like the user agent stylesheet is overwriting my style. Why?

推荐答案

Vonkly 帮助确定了问题.我翻遍了我所有的样式表，发现其中一个有错别字——在定义标题的链接样式时缺少父元素，所以不是

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

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

我有

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.

感谢大家的评论！

这篇关于Chrome 用户代理样式表覆盖了我的网站样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！