自定义社交共享小部件中的跨浏览器CSS问题

Question

我正在努力让自定义社交分享窗口小部件在我的Wordpress模板中运行。

对CSSDeck和Dabblet有效，并且也可以在Firefox中使用，但在Chrome或Safari中无法使用，现在我无法理解出现了什么问题，或者如何修复它。

要查看实际操作的代码，请参阅以下链接：

CSSDeck：http://cssdeck.com/labs/zjc2m9rl 我的实际网站：http://tinyurl.com/qaddxwm

任何人都可以指出为什么这不适用于Chrome / Safari？

有三个问题：1）社交分享图标应该在加载时隐藏，但它们不是（在Firefox中工作得相当好）。 2）您应该能够通过单击主要共享图标隐藏或显示社交共享图标（在Firefox中工作，在Chrome / Safari上完全不起作用）。 3）将鼠标悬停在社交图标上应该将其变为白色（在Firefox中有效，但有些甚至会在Chrome / Safari中消失）。

（p.s。，如果我的一些类被奇怪地命名，那是因为这个小部件所基于的原始Codepen小部件中的类与我主题中的现有类冲突。）

Answer 1

刚刚在Chrome中看到它并且非常适合我，它首先隐藏图标，点击时显示/隐藏并在以下情况下更改颜色：悬停

修改

在您的网站中发现问题，只需将-webkit-前缀添加到所有转换中： .postsocialshare中的值