谷歌浏览器 a:访问的背景图片不起作用

问题描述

(在我开始之前，我应该说是的，我已经完成了所有的愚蠢检查，是的，链接在我的历史记录中并且已经被访问过等)

我使用的是 Chrome 版本 6.0.472.63，但重要的是它适用于所有浏览器.

它适用于 Firefox、IE 和 Opera.

基本上我要做的就是在链接已被访问时更改链接的背景图像.

我已经进行了大量的试错测试，所以请耐心等待多个示例.

这是我原来的

.forum_box .title a {背景图像:url(../images/f_unread.png);背景位置:10px 中心；背景重复:不重复；背景颜色:透明；颜色:#2D4054；字体大小:14px；填充:10px 12px 10px 44px;文字装饰:无；显示:块；字体粗细:粗体；}.forum_box .title a:visited {背景图像:url(../images/f_read.png);}

适用于除 Chrome 之外的所有浏览器.接下来，我尝试将其设为颜色而不是图像.

.forum_box .title a:visited {背景颜色:红色；}

再次相同，但是我将链接更改为 #fff 而不是透明，并且访问的链接变为红色，因此显然 bg 颜色仅在您为父级设置 bg 颜色时才有效.

.forum_box .title a {背景图像:url(../images/f_unread.png);背景位置:10px 中心；背景重复:不重复；背景色:#fff;颜色:#2D4054；字体大小:14px；填充:10px 12px 10px 44px;文字装饰:无；显示:块；字体粗细:粗体；}.forum_box .title a:visited {背景颜色:红色；}

但是它仍然不能解决我的图像问题.所以在最后一次尝试中，我尝试了这个，希望出于某种原因，Chrome 只能在两者中存在相同的属性时才能工作.

.forum_box .title a {背景:#fff url(../images/f_unread.png) 无重复 10px 中心；颜色:#2D4054；字体大小:14px；填充:10px 12px 10px 44px;文字装饰:无；显示:块；字体粗细:粗体；}.forum_box .title a:visited {背景:#fff url(../images/f_read.png) 无重复 10px 中心；}

这也不起作用，并继续在 Firefix、Opera 和 IE 上工作.所以我很困惑地来到 Stack Overflow.

任何帮助将不胜感激！

更新:我尝试了一个 jQuery 解决方案，但它仍然不起作用.尽管有 :visited 链接，我可以通过将字体颜色更改为红色来确认它们的访问状态.jQuery('a:visited').length 返回 0.

解决方案

同样的问题.在 a:visited 上更改 CSS Sprite 中的背景位置在 Firefox 3.6 中对我有效，但在 Chrome 6 中无效.

但可能很快它也会在 Firefox 中停止工作.(也许是 FF 4?)

这是一个隐私问题，您可以在此处阅读有关它的 Mozilla 文章(2010 年 3 月)http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/和错误:https://bugzilla.mozilla.org/show_bug.cgi?id=147777#c160

我认为唯一可能的解决方案是创造性地使用背景颜色而不是图像.

(before I start I should say yes, I have done all the stupidity checks, yes the link is in my history and has been visited etc)

I'm using Chrome version 6.0.472.63, although it's important that this works on all browsers.

It works on Firefox, IE and Opera.

Basically all i'm trying to do is change the background image of a link if the link has been visited.

I've done alot of trial and error testing so bear with me for multiple examples.

This is what I had originally

.forum_box .title a {
 background-image:url(../images/f_unread.png);
 background-position:10px center;
 background-repeat:no-repeat;
 background-color:transparent;
 color:#2D4054;
 font-size:14px;
 padding:10px 12px 10px 44px;
 text-decoration:none;
 display:block;
 font-weight:bold;
}
.forum_box .title a:visited {
 background-image:url(../images/f_read.png);
}

Works in every browser except Chrome. Next I tried just making it a colour rather than image.

.forum_box .title a:visited {
 background-color:red;
}

Same again, however I changed the link to #fff instead of transparent and the visited link changed red, so apparently the bg colour only works if you set a bg colour for the parent.

.forum_box .title a {
 background-image:url(../images/f_unread.png);
 background-position:10px center;
 background-repeat:no-repeat;
 background-color:#fff;
 color:#2D4054;
 font-size:14px;
 padding:10px 12px 10px 44px;
 text-decoration:none;
 display:block;
 font-weight:bold;
}
.forum_box .title a:visited {
 background-color:red;
}

However it still doesn't solve my image problem. So in one final attempt I tried this in the hope that for some reason Chrome would only work when the same properties where present in both.

.forum_box .title a {
 background:#fff url(../images/f_unread.png) no-repeat 10px center;
 color:#2D4054;
 font-size:14px;
 padding:10px 12px 10px 44px;
 text-decoration:none;
 display:block;
 font-weight:bold;
}
.forum_box .title a:visited {
 background:#fff url(../images/f_read.png) no-repeat 10px center;
}

That didn't work either and again continued to work on Firefix, Opera and IE. So I come here to Stack Overflow very confused.

Any help would be greatly appreciated!

UPDATE:I've attempted a jQuery solution, although it still doesn't work. Despite having :visited links and I can confirm their visited state by changing the font color to red. jQuery('a:visited').length returns 0.

解决方案

Same problem here.Changing background-position in a CSS Sprite on a:visited is working for me in Firefox 3.6 but not in Chrome 6.

But probably soon it will stop working in Firefox too. (maybe for FF 4?)

It's a privacy problem, and you can read here a Mozilla article about it (March 2010) http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/And the bug:https://bugzilla.mozilla.org/show_bug.cgi?id=147777#c160

I think only possible solution is to use creatively the background-color instead of images.

这篇关于谷歌浏览器 a:访问的背景图片不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！