Question

我有这段代码

nav {
   background-color:#600;
   padding:3px 0;
}
#menu {
   list-style: none;
   position: relative;
   text-align: center;
   z-index: 50;
}
#menu li {
   position: relative;
   display: inline-block;
   height: 40px;
   width:100px;
   max-width: 100%;
}
#menu li a {
   color: #000;
   text-decoration: none;
   display: block;
   position: relative;
   height: 40px;
   padding: 10px 15px 0;
   font-family: Berlin Sans FB;
   -webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
}
#menu li span {
   width: 6px;
   z-index: -1;
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   -webkit-transition: all 0.4s ease-in;
   -moz-transition: all 0.4s ease-in;
   -o-transition: all 0.4s ease-in;
   -ms-transition: all 0.4s ease-in;
   transition: all 0.4s ease-in;
}
#menu li:nth-of-type(1) span {background: green;}
#menu li:nth-of-type(2) span {background: red;}
#menu li:nth-of-type(3) span {background: #ff8400;}
#menu li:nth-of-type(4) span {background: purple;}
#menu li:nth-of-type(5) span {background: #49a7f3;}
#menu li:nth-of-type(6) span {background: yellow;}
#menu li:hover > span {min-width: 100%;}
#menu li a:hover {color: #fff;}
#menu li:hover {box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,0.3);}

Fiddle

它在Chrome，Safari和Firefox中运行良好＆lt; 18。它在Internet Explorer或Firefox 18中不起作用。在此版本的Firefox中是否有更改了转换工作方式的内容？

我看了这个问题和接受的答案，但没有意义 Why is my CSS3 Transition not working in Firefox?

Answer 1

似乎将宽度更改为min-width以外的值会使其在Firefox 18 / Mac中正常工作....

 #menu li:hover > span {
  width: 100%;
 }

Fiddle update

正如Ben在你所链接的问题中指出的那样，FF似乎想要声明性的值。

Answer 2

目前还没有适合我测试的Firefox 18版本，但在查看您的代码后，我相信您缺少transition属性的无前缀版本

Fiddle

transition:all 0.2s ease-in;

根据Can I Use?，Firefox已经支持非前缀版本。

Firefox 18中的转换有什么问题

2 个答案: