隐藏的可见性在具有 CSS 内容的 Microsoft Edge 上不起作用：url()；

Question

参见 Fiddle： https://jsfiddle.net/8wk0tsnL/8/

有问题的部分是这个（适用于 FF、Chrome、IE，但不适用于 Edge）：

.testclass:after {
  content: url(http://placekitten.com/96/139);
  visibility:hidden;
}

.testclass:hover:after, .testclass:hover:before {
  visibility:visible;
}

图像未隐藏在Edge 中。如果将 content: url(...); 替换为文本字符串 content: "example";，它在 Edge 中工作正常。

这是一个错误吗？任何已知的解决方法？

（Edge 的浏览器市场份额不到 5%，所以我不想用非常奇特或支持稀少的解决方案污染我的代码）。

Answer 1

我建议你使用不透明度属性一旦你可以使用过渡使其平滑，顺便说一句，使用不透明度它有一个缺点，它隐藏了元素但仍然有可点击区域。

.testclass:after{
   content: url(http://placekitten.com/96/139);
   opacity: 0;
}

.testclass:hover:after{
   opacity: 1;
}

隐藏的可见性在具有 CSS 内容的 Microsoft Edge 上不起作用：url()；

Visibility hidden does not work on Microsoft Edge with CSS content: url();

css

hidden

visibility

microsoft-edge