负文本缩进，翻译上

Question

我遇到一个Firefox特定的错误有一个简单的菜单我已经建立了

这是一个UL-列表具有列表项的上悬停效悬停的bug（火狐） ，列表项有悬停时应用transform:translateX(12px)，并且文本链接始终应用否定缩进，两者的组合会创建一个Firefox特定的错误，其中的部分文本在其动画中悬停时消失，看起来像它的基本存在由于负值而被自己的填充所隐藏。

这里是一个JS小提琴以及代码，我是否缺少-moz-css？

https://jsfiddle.net/CultureInspired/9435v0vy/1/

<ul class="menu_desktop"> 
       <li><a href="/">Home</a></li> 
       <li><a href="/">About</a></li> 
       <li><a href="/">Press</a></li> 
       <li><a href="/">Contact</a></li> 
</ul> 

CSS：

.menu_desktop { 
    list-style-type: none; 
    margin: 80px; 
    padding: 0; 
} 

.menu_desktop li { 
    background: #fff; 
    margin-bottom: 10px; 
    text-indent: -.8em; 
    text-transform: uppercase; 
    letter-spacing: 6px; 
    display: table; 
    -webkit-transition: all 0.2s ease-out; 
    -moz-transition: all 0.2s ease-out; 
    -ms-transition: all 0.2s ease-out; 
    -o-transition: all 0.2s ease-out; 
    transition: all 0.2s ease-out; 
} 

.menu_desktop li:hover { 
    transform: translateX(12px); 
} 

.menu_desktop a { 
    color: #000; 
    height: 100%; 
    padding: 8px; 
    display: block; 
    text-decoration:none; 
} 

Answer 1

我有同样的问题与Firefox 49.0.2，这似乎是一个错误。

您可以通过使用margin-left: 12px;而不是您正在使用的transform来解决此问题。

这里是修复（在Firefox的作​​品，铬& IE）：

body { 
 
    background: lightgray; 
 
} 
 
.menu_desktop { 
 
    list-style-type: none; 
 
    margin: 80px; 
 
    padding: 0; 
 
} 
 

 
.menu_desktop li { 
 
    background: #fff; 
 
    margin-bottom: 10px; 
 
    text-indent: -.8em; 
 
    text-transform: uppercase; 
 
    letter-spacing: 6px; 
 
    display: table; 
 
    -webkit-transition: all 0.2s ease-out; 
 
    -moz-transition: all 0.2s ease-out; 
 
    -ms-transition: all 0.2s ease-out; 
 
    -o-transition: all 0.2s ease-out; 
 
    transition: all 0.2s ease-out; 
 
} 
 

 
.menu_desktop li:hover { 
 
    margin-left: 12px; 
 
} 
 

 
.menu_desktop a { 
 
    color: #000; 
 
    height: 100%; 
 
    padding: 8px; 
 
    display: block; 
 
    text-decoration:none; 
 
}

<ul class="menu_desktop"> 
 
    <li><a href="/">Home</a></li> 
 
    <li><a href="/">About</a></li> 
 
    <li><a href="/">Press</a></li> 
 
    <li><a href="/">Contact</a></li> 
 
</ul>