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

【问题标题】：Chrome user agent stylesheet overwriting my site styleChrome 用户代理样式表覆盖我的网站样式
【发布时间】：2011-11-19 22:51:08
【问题描述】：

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

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

【问题讨论】：

不是。更具体地描述你的问题。哪种风格不适用？什么是不正确样式元素的 html 代码。
链接应该在 Chrome 中显示为白色。它们在 Firefox 中正确显示。
在我的桌面上完美运行 - chrome 13.0.782.220 m。并且根据i.stack.imgur.com/FlIjd.jpg所选链接的颜色为白色。
正确，它应该是白色的，但显示为蓝色，如我的 Chrome 实例上的i.stack.imgur.com/qlHa0.jpg 所示。

标签： html ruby-on-rails css google-chrome web

【解决方案1】：

我不知道为什么，但我添加了这个<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 在<html> 之前解决了

【讨论】：

目前已经过时了。请改用<!doctype html>。

【解决方案2】：

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

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

我有

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

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

感谢大家的cmets！

【讨论】：

【解决方案3】：

只需在<html> 标签前添加<!DOCTYPE html>。

【讨论】：

这行得通。我的文档缺少文档类型，我带着诊断来到这里，用户代理样式表正在覆盖我的 css。

【解决方案4】：

我遇到了同样的问题，我的情况是我的一些课程被强制显示：无

30/40 分钟后，我查看了浏览器扩展，发现所有这些都是由于 AD Blocker 而发生的。

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

【讨论】：

【解决方案5】：

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

如果您将标签声明放在 css 文件的开头并且它可以工作，那么您的 css 中可能有错误。

尝试通过 CSS Lint 运行你的 css

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

【讨论】：

【解决方案6】：

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

 body {
 margin: 0%;
  }

【讨论】：

【解决方案7】：

使用通用css锚样式a：

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

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

字符集应该设置在它所属的HTTP头中。

【讨论】：

上面列出的 css 组是样式表中唯一的元素吗？您是否正在使用另一个样式表，或者在包装容器中使用!important 定义了锚颜色？
另外，请尝试移除去缓存技巧（?body=1）。我怀疑那是你的错误 - 它更有可能与你的锚标签使用 !important 规则定义有关。我无法在 Chrome 中的任何计算机上重现此问题。