伪元素上的过渡不适用于 firefox 浏览器

Question

我原以为 Internet Explorer 会提供此功能，但我心爱的 Firefox 让我失望了。

这个 fiddle 在 Firefox 上不起作用（至少对我来说不起作用），我想知道为什么。我看过很多文档，我想这应该可行。

这里是fiddle：http://jsfiddle.net/6UFX7/11300/

HTML:

<div id="nav">
    <ul>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
    </ul>
</div>

CSS:

#nav 
{   
height:60px;
background-color:#FFFFFF;
overflow:hidden;
}

#nav ul 
{
color: #f2f2f2;
margin-top:20px;
list-style-type: none;
text-align: center;
float:left;
}

#nav ul li
{
display: inline-block;
*display: inline;
zoom: 1;
margin: 0 10px;   
}

#nav ul li a 
{
color: #8198A0;
font-style: normal;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}

#nav ul li a:after 
{
margin-top:16px;
content: "";
display: block;
height: 5px;
width: 0;
-webkit-transition: width 0.5s ease, background-color 0.5s ease;
-moz-transition: width 0.5s ease, background-color 0.5s ease;
-o-transition: width 0.5s ease, background-color 0.5s ease;
transition: width 0.5s ease, background-color 0.5s ease;
pointer-events:none;
}

#nav ul li a:hover:after 
{
width: 100%;
background-color:#8198A0;
}

#nav ul li a:hover
{
cursor: pointer;
}

关于 "pointer-events:none" 的另一个快速问题：

它在 Internet Explorer 上运行良好，但在 Chrome 上运行不正常（由于上述问题，我无法在 Firefox 上测试它）。

提前致谢！

Answer 1

这似乎是因为 #nav ul li a 元素是默认的 display: inline。将 display: inline-block; 添加到这些元素可解决问题。

工作示例：

#nav 
{   
    height:60px;
    background-color:#FFFFFF;
    overflow:hidden;
}

#nav ul 
{
    color: #f2f2f2;
    margin-top:20px;
    list-style-type: none;
    text-align: center;
    float:left;
}

#nav ul li
{
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin: 0 10px;   
}

#nav ul li a 
{
    color: #8198A0;
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.25px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    -webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -o-transition: color 0.5s ease;
    transition: color 0.5s ease;
}

#nav ul li a:after 
{
    margin-top:16px;
    content: "";
    display: block;
    height: 5px;
    width: 0;
    -webkit-transition: width 0.5s ease, background-color 0.5s ease;
    -moz-transition: width 0.5s ease, background-color 0.5s ease;
    -o-transition: width 0.5s ease, background-color 0.5s ease;
    transition: width 0.5s ease, background-color 0.5s ease;
    pointer-events:none;
}

#nav ul li a:hover:after 
{
    width: 100%;
    background-color:#8198A0;
}

#nav ul li a:hover
{
    cursor: pointer;
}

<div id="nav">
    <ul>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
    </ul>
</div>

至于 pointer-events 问题，如果这也不能解决那个问题，您可能应该专门问一个问题。

伪元素上的过渡不适用于 firefox 浏览器

Transitions on pseudo-elements not working on firefox browser

html

css

firefox

pseudo-element

工作示例：