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

新手上路,请多包涵

我有以下 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 中的样子 - 正确:

在此处输入图像描述

看起来用户代理样式表正在覆盖我的样式。为什么?

原文由 TK Gospodinov 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.2k
2 个回答

Vonkly 帮助确定了问题。我仔细研究了我所有的样式表,发现其中一个有错别字——在定义标题的链接样式时它缺少父元素,所以而不是

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

我有

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

所以它覆盖了我为正文中的链接定义的样式。我一定是在第一次检查我的样式表时错过了它。

谢谢大家的意见!

原文由 TK Gospodinov 发布,翻译遵循 CC BY-SA 3.0 许可协议

我不知道为什么,但我在 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> 并且它解决了

原文由 Ahmad Muzakki 发布,翻译遵循 CC BY-SA 3.0 许可协议

推荐问题