負のテキストインデント、私はそれは、リスト項目のオンホバー効果を持つUL-リストです</p> <p>を構築したシンプルなメニューとFirefoxの特定のバグを経験してい

Question

ホバーバグ（Firefoxの）に変換しますリスト項目にはホバー上にtransform:translateX(12px)が適用され、テキストリンクには常に負のインデントが適用されます.2つの組み合わせは、アニメーション中にテキストの一部がホバー上に消える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と同じ問題を持っている、それはバグのように思えます。

これは、現在使用しているtransformの代わりにmargin-left: 12px;を使用して解決できます。これは、Firefoxに私には罰金だ

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>