0

我有这个代码

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);}

小提琴

它在 Chrome、Safari 和 Firefox<18 中运行良好。它在 Internet Explorer 或 Firefox 18 中不起作用。在这个版本的 Firefox 中是否有一些改变改变了转换的工作方式？

我查看了这个问题和接受的答案，但没有意义
为什么我的 CSS3 转换在 Firefox 中不起作用？

4

2 回答 2

1

似乎将宽度更改为一个值，而不是min-width使其在 Firefox 18/Mac 中正常工作......

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

小提琴更新

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

于 2013-01-17T03:34:34.527 回答
0

我现在没有可供我测试的 Firefox 18 版本，但是在查看了您的代码之后，我相信您缺少该transition属性的无前缀版本

小提琴

transition:all 0.2s ease-in;

根据我可以使用吗？, Firefox 已经支持无前缀版本。

于 2013-01-17T03:27:13.433 回答