div background-image 在 Firefox 中悬停时变为空白？答案

【问题标题】：div background-image goes blank on hover in Firefox?div background-image 在 Firefox 中悬停时变为空白？
【发布时间】：2015-12-01 04:50:18
【问题描述】：

当有人将鼠标悬停在它上面时，我有一个元素应该更改 background-image。但是，背景图像是 SVG，为 data-uris。

它在 Webkit 浏览器（Chrome、Safari、Opera）上运行良好，在 IE 上运行良好。

但是，在 Firefox 上，每当我悬停时，图像就会变成空白。当我尝试通过检查元素并可能更改颜色或其他一些不相关的样式来摆弄它时，图像神奇地出现了。

这里出了什么问题，我该如何解决？

这是我的 CSS：

.info .comment{
    background-image: url('data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20fill%3D"%23D9D9D9"%20width%3D"25px"%20height%3D"25px">%0D%0A%20<path%20d%3D"M11.5%201C5.159441000000001%201%200%205.54683583%200%2011.1341066C0%2013.8432911%201.2135882000000038%2016.305879%203.1855000000000047%2018.1266402C3.3234999999999957%2018.2536543%203.4046764999999937%2018.4293122%203.4046764999999937%2018.6164553L3.4046764999999937%2024.1449483C3.2423234999999977%2024.7442118%203.9045882000000063%2025.2259197%204.426147099999994%2024.8887917L8.889499999999998%2021.2411889C9.039676%2021.118904%209.233823999999998%2021.0702603%209.425264999999996%2021.1006627C10.098353000000003%2021.210111%2010.791735000000003%2021.2682132%2011.5%2021.2682132C17.841234999999998%2021.2682132%2023%2016.722053%2023%2011.1341066C23%205.54683583%2017.841234999999998%201%2011.5%201"%2F>%0D%0A%0D%0A%0D%0A<%2Fsvg>');
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    color: #D9D9D9;
    display: inline-block;
}

.info:hover .comment, .info:visited .comment{
    background-image: url('data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20fill%3D"%23CCCCCC"%20width%3D"25px"%20height%3D"25px">%0D%0A%20<path%20d%3D"M11.5%201C5.159441000000001%201%200%205.54683583%200%2011.1341066C0%2013.8432911%201.2135882000000038%2016.305879%203.1855000000000047%2018.1266402C3.3234999999999957%2018.2536543%203.4046764999999937%2018.4293122%203.4046764999999937%2018.6164553L3.4046764999999937%2024.1449483C3.2423234999999977%2024.7442118%203.9045882000000063%2025.2259197%204.426147099999994%2024.8887917L8.889499999999998%2021.2411889C9.039676%2021.118904%209.233823999999998%2021.0702603%209.425264999999996%2021.1006627C10.098353000000003%2021.210111%2010.791735000000003%2021.2682132%2011.5%2021.2682132C17.841234999999998%2021.2682132%2023%2016.722053%2023%2011.1341066C23%205.54683583%2017.841234999999998%201%2011.5%201"%2F>%0D%0A%0D%0A%0D%0A<%2Fsvg>');
}

.info:hover {
color:#CCCCCC
}

还有我的 HTML：

<a class="info" href="#">
            <div class="comment" role="img"></div>
            500
            </a>

【问题讨论】：

我将您的代码放入一个快速的 html 文件（和一个 jsfiddle）中，并且在 Firefox 中似乎一切正常。同样的事情会发生在私人窗口中吗？还是在你清除缓存之后？
为我工作，check my fiddle
@wmeade 你是对的。但是我只是添加了 :visited 状态，然后它就中断了。我找到了它变成空白的原因。只需要知道为什么
@leftside 参见上面的评论，参见 jsfiddle.net/tcynrd62/2 它在 Firefox 中中断。不知道为什么...
只有颜色可以用来设置访问链接的样式：dbaron.org/mozilla/visited-privacy

标签： html css firefox svg

【解决方案1】：

发生这种情况是因为在使用任何pseudo-class 时顺序很重要。 Firefox 尊重 :visited 上的 CSS spec 而基于 webkit 的浏览器将允许，因为它们在 spec 时更加宽松。

codepen 中的示例：

http://codepen.io/jonathan/pen/GpVXMN

jsfiddle 中的相同示例：

http://jsfiddle.net/98assuba/1/

您需要确保在使用:visited 时使用伪类:link。

由于规范规定:link 必须在:visited 之前。因此，由于您要将其添加到与 :hover 相同的 CSS 规则中，因此您必须将其添加到 .info .comment 规则的默认状态。

所以将.info:link .comment 行添加到与.info .comment 相同的CSS 规则中

将.info:visited .comment移到.info:hover .comment之前

.info:link .comment, /* add this line */
.info .comment{
     background-image: url('data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20fill%3D"%23D9D9D9"%20width%3D"25px"%20height%3D"25px">%0D%0A%20<path%20d%3D"M11.5%201C5.159441000000001%201%200%205.54683583%200%2011.1341066C0%2013.8432911%201.2135882000000038%2016.305879%203.1855000000000047%2018.1266402C3.3234999999999957%2018.2536543%203.4046764999999937%2018.4293122%203.4046764999999937%2018.6164553L3.4046764999999937%2024.1449483C3.2423234999999977%2024.7442118%203.9045882000000063%2025.2259197%204.426147099999994%2024.8887917L8.889499999999998%2021.2411889C9.039676%2021.118904%209.233823999999998%2021.0702603%209.425264999999996%2021.1006627C10.098353000000003%2021.210111%2010.791735000000003%2021.2682132%2011.5%2021.2682132C17.841234999999998%2021.2682132%2023%2016.722053%2023%2011.1341066C23%205.54683583%2017.841234999999998%201%2011.5%201"%2F>%0D%0A%0D%0A%0D%0A<%2Fsvg>');
     background-repeat: no-repeat;
     background-size: contain;
     width: 20px;
     height: 20px;
     color: #D9D9D9;
     display: inline-block;
}

.info:visited .comment, /* add this before :hover */
.info:hover .comment{
     background-image: url('data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20fill%3D"%23CCCCCC"%20width%3D"25px"%20height%3D"25px">%0D%0A%20<path%20d%3D"M11.5%201C5.159441000000001%201%200%205.54683583%200%2011.1341066C0%2013.8432911%201.2135882000000038%2016.305879%203.1855000000000047%2018.1266402C3.3234999999999957%2018.2536543%203.4046764999999937%2018.4293122%203.4046764999999937%2018.6164553L3.4046764999999937%2024.1449483C3.2423234999999977%2024.7442118%203.9045882000000063%2025.2259197%204.426147099999994%2024.8887917L8.889499999999998%2021.2411889C9.039676%2021.118904%209.233823999999998%2021.0702603%209.425264999999996%2021.1006627C10.098353000000003%2021.210111%2010.791735000000003%2021.2682132%2011.5%2021.2682132C17.841234999999998%2021.2682132%2023%2016.722053%2023%2011.1341066C23%205.54683583%2017.841234999999998%201%2011.5%201"%2F>%0D%0A%0D%0A%0D%0A<%2Fsvg>');
}

.info:hover {
     color:#CCCCCC
}

取自 :visited 的 Firefox MDN CSS 参考文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

:visited CSS 伪类允许您仅选择已访问过的链接。此样式可能会被任何其他与链接相关的伪类覆盖，即 :link、:hover 和 :active，出现在后续规则中。为了设置适当的链接样式，您需要将 :visited 规则放在 :link 规则之后，但在其他规则之前，按 LVHA 顺序定义：:link — :visited — :hover — :active。

以及针对伪类:visited 的 W3C 规范

http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes

所以请记住始终按特定顺序放置伪类（即使对同一元素使用不同的规则）：

LVHA 顺序：:link — :visited — :hover — :active

换句话说，你可以这样记住顺序：

Lord V阿德的H和以前的Anakin

一旦你对伪类使用了正确的顺序，浏览器就会一致地正确呈现。

【讨论】：