Chrome 用户代理样式表覆盖我的网站样式
Posted
技术标签:
【中文标题】Chrome 用户代理样式表覆盖我的网站样式【英文标题】：Chrome user agent stylesheet overwriting my site style 【发布时间】：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 所示。 【参考方案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 中的任何计算机上重现此问题。以上是关于Chrome 用户代理样式表覆盖我的网站样式的主要内容，如果未能解决你的问题，请参考以下文章