我遇到了一个firefox特定错误,我已经建立了一个简单的菜单
这是一个对列表项具有悬停效果的ul列表,列表项在悬停时应用transform:translateX(12px)
,文本链接始终应用负缩进,两者的组合创建了一个特定于Firefox的bug,其中部分文本在其动画期间悬停时消失,看起来由于负值而基本上被其自己的填充隐藏。
这是一个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;
}
答案 0 :(得分:1)
我在firefox 49.0.2中遇到了同样的问题,这似乎是一个bug。
您可以使用margin-left: 12px;
代替当前使用的transform
来解决此问题。
这是修复程序(适用于firefox,chrome&amp; 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>