对伪元素的转换不适用于firefox浏览器

Question

我期待从Internet Explorer中获得这个，但是我心爱的Firefox让我失望了。

这个小提琴在Firefox上不起作用（至少对我来说没有），我想知道原因。我看过很多文档，我想这应该有用。

这是小提琴：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;
}

关于＆＃34;指针事件的另一个快速问题：无＆＃34;：

它在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问题，如果这也不能解决这个问题，你应该特别提出一个问题。