負文本縮進，翻譯上

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>