logo标签列表

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

htmlruby-on-railscssgoogle-chromeweb
23
我有以下CSS样式，用于给页面上的链接添加样式：
a:link, a:visited, a:active {
    color: white;
    text-decoration: none;
    font-weight: bold;
}
然而，当我加载它时，它们在Chrome中显示为蓝色，在Firefox中显示为白色。Chrome开发工具显示我的样式似乎覆盖了用户代理样式表： enter image description here 为什么它没有正确显示？我尝试将字符集设置在我的样式表顶部：
@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代码是什么？ - NiematojakTomasz
2
链接应该在Chrome中显示为白色。它们在Firefox中正确显示。 - TK Gospodinov
在我的桌面 - Chrome 13.0.782.220 m 上完美运行。根据http://i.stack.imgur.com/FlIjd.jpg所示，选定链接的颜色为白色。 - NiematojakTomasz
正确的应该是白色，但在我的Chrome浏览器中显示为蓝色，如http://i.stack.imgur.com/qlHa0.jpg所示。 - TK Gospodinov
7个回答
11
我不知道为什么，在 <html> 前添加这个<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">，问题得到了解决。
6
那已经非常过时了。改用 <!doctype html>。 - B T
8
Vonkly 帮助识别了问题。我浏览了所有的样式表，发现其中一个样式表有点小问题 - 在为标题定义链接样式时，缺少了父元素，所以最终结果变成了：
header a:link, header a:visited {
...
}

我有

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

所以它覆盖了我在body中定义的链接样式，第一次检查我的样式表时可能错过了它。

谢谢大家的评论！

5
只需在 <html> 标签之前添加 <!DOCTYPE html> 即可。
这个问题已经解决了。我的文档缺少doctype，我来到这里诊断后发现用户代理样式表正在覆盖我的CSS。 - user85155
2

我曾经遇到类似的问题，我的一些类被强制设置为 display:none。

30/40分钟后，我查看了浏览器扩展程序，发现这一切都是由于广告拦截器造成的。

如果以上任何解决方案对您都不起作用，请检查是否安装了此类浏览器扩展程序。

1
用户代理样式表仅在您的CSS未定义标签属性时才会启用。请考虑您的CSS样式中可能存在拼写错误。
如果您将标签声明放在CSS文件开头并且它有效，则很有可能您的CSS存在错误。
尝试通过 CSS Lint运行您的CSS。
我曾经遇到过这个问题，并发现我的CSS中存在错误。
1

在浏览器自动设置之前，强制调整您的边距

body {
    margin: 0%;
}
-1
使用通用 CSS 锚点样式 a：
a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

另外，在你的 CSS 文件中不需要设置字符集。我会把它移除。

字符集应该在 HTTP 头中设置，这是它应该存在的地方。

1
你的样式表中上面列出的 CSS 组是唯一的元素吗？或许你还在使用另一个样式表，或者将锚点颜色定义在包装容器中并加了 !important 标记？ - user926352
另外，尝试删除去缓存技巧（?body=1）。我怀疑这不是你的错误 - 更可能与你的锚标签被定义为应用了“!important”规则有关。在Chrome上，我无法在我的任何计算机上重现此问题。 - user926352
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接