css - Firefox 转换不工作(声明的初始值)

Question

以下过渡动画适用于除 Firefox 之外的所有浏览器。我知道您必须初始化要在 Firefox 中转换的属性。在这种情况下，动画、边框、字母间距和背景这三个属性被赋予明确声明的默认值。

>a {
    text-align: center;
    padding: 10px 0;
    display: block;
    color: white;
    width: 100%;
    -webkit-transition: border .5s, letter-spacing .2s, background .5s;
    -moz-transition: border .5s, letter-spacing .2s, background .5s;
    -ms-transition: border .5s, letter-spacing .2s, background .5s;
    -o-transition: border .5s, letter-spacing .2s, background .5s;
    transition: border .5s, letter-spacing .2s, background .5s;
    background: transparent;
    letter-spacing: 1px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}
>a:hover {
    background: blue;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    letter-spacing: 2px;
}

There's a working fiddle here

子菜单元素是过渡动画适用于除 Firefox(v.31 OS X)以外的所有元素。

(我为 fiddle 中的冗长而神秘的 CSS 道歉，我使用 SASS。我已经评论了 CSS 的相关部分:

/*
   TWISTED TRANSITION
*/

帮助你找到它)

编辑:

看到 Fabio 的评论，我想知道其他人是否可以给我留下评论，如果它对他们有用。我开始怀疑这是否不是 OS X FireFox 故障。

Answer 1

只需为 li 设置样式，而不是 a

header nav > .ul_wrap > ul > li > ul > li {
text-align: center;
padding: 10px 0;
display: block;
color: white;
width: 100%;

transition: all 5s ease-in-out;
background: transparent;
letter-spacing: 1px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
header nav > .ul_wrap > ul > li > ul > li:hover {
background: #3b4979;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
-webkit-box-shadow: #273565 0 0 2px 1px inset;
-moz-box-shadow: #273565 0 0 2px 1px inset;
box-shadow: #273565 0 0 2px 1px inset;
}
header nav > .ul_wrap > ul > li > ul > li > a{color:#fff}

我在 FF 中试过了，效果非常好。 see fiddle