음수 텍스트 들여 쓰기, 내가 그것은 목록 항목에 대한 온 - 호버 효과를 가진 UL 목록의</p> <p>을 구축 한 간단한 메뉴와 파이어 폭스 특정 버그가 발생하고있어

Question

호버 버그 (파이어 폭스)에 번역 , 목록 항목에는 호버에 적용된 transform:translateX(12px)이 있고 텍스트 링크에는 언제나 적용된 음수 들여 쓰기가 있습니다. 두 조합은 Firefox 특정 버그를 만듭니다. 애니메이션에서 마우스를 가져 가면 텍스트의 일부가 사라지고 기본적으로 보이게됩니다. 음수 값 때문에 자체 패딩에 의해 숨겨집니다.

여기는 JS 피들 (Python Fiddle)과 코드입니다. 코드가 빠졌습니까? -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 : 나는 파이어 폭스 49.0.2와 같은 문제가 발생했습니다

.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

, 그것은 버그처럼 보인다.

현재 사용중인 transform 대신 margin-left: 12px;을 사용하여이 문제를 해결할 수 있습니다.

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>