该功能仅适用于 Chrome，不适用于 Firefox。如何在 Firefox 中替换？答案

【问题标题】：Feature only works in Chrome, but not Firefox. How do I replace in Firefox?该功能仅适用于 Chrome，不适用于 Firefox。如何在 Firefox 中替换？
【发布时间】：2012-06-16 15:25:24
【问题描述】：

我在我的网站上添加了一个悬浮板，它可以翻转以显示更多文字。它仅适用于 Chrome。在 Firefox 中，它使整个框在悬停时变为灰色。如何让它在 Chrome 中运行而在 Firefox 中不执行任何操作？

我拿它的地方是：

http://cssdeck.com/item/122/hoverboard-3d

我的网站是：

（已删除）- 将鼠标悬停在“按可用性排序产品”以查看我所指的内容。

谢谢！！

【问题讨论】：

标签： css wordpress google-chrome webkit hover

【解决方案1】：

复制并粘贴所有以-moz- 开头的属性

-webkit-font-smoothing: antialiased;
-webkit-transform-origin: top;
-webkit-transition: all .2s ease-in-out;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;

-webkit- 用于 chrome/safari，-moz- 用于 Firefox

【讨论】：

将所有内容更改为 webkit。在 Firefox 中看起来不像在 chrome 中那么好，但它确实有效！

【解决方案2】：

使用 Firefox 特定的前缀并用常规类覆盖 :hover 类。像这样：

@-moz-document url-prefix() {
#hover-flip:hover p  {
     background: #fff;
     color: #009EE0;
     margin: -40px 0 0 0;
     position: relative; 
}
#hover-flip:hover {
     border-top: 1px solid #DDD;
     bottom: 0;
     color: #df3e7b;
     font-size: 14px;
     line-height: 40px;
     position: absolute;
     width: 100%; 
}

}

记得把它放在 CSS 的底部，这样它就会通过级联覆盖之前的规则。工作示例here。

【讨论】：

Jsfiddle 很棒。感谢您的提示！
@Dipaks，不，但我用过这个前缀几次，直到现在它一直对我有用。顺便说一句，你的答案看起来也不错，也许更干净，所以你给我一个 +1 ;)
@user1429400，最好针对该问题提出一个新问题，以便获得更多帮助；）