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で正常に動作しました。InternetExplorerまたはFirefox18では機能しません。このバージョンのFirefoxで変更され、トランジションの動作が変更されたものはありますか？

私はこの質問と受け入れられた答えを見ましたが、それは意味がありませんでした
なぜ私のCSS3トランジションがFirefoxで機能しないのですか？

4

2 に答える 2

1

min-width幅をFirefox18/Macで正しく機能する以外の値に変更しているようです。

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

フィドルアップデート

あなたがリンクした質問でベンが指摘したように、FFは宣言的な値を望んでいるようです。

于 2013-01-17T03:34:34.527 に答える
0

現在テストできるFirefox18のバージョンはありませんが、コードを確認したところ、接頭辞のないバージョンのtransitionプロパティが欠落していると思います。

フィドル

transition:all 0.2s ease-in;

使用できますか？、Firefoxはプレフィックスなしのバージョンをすでにサポートしています。

于 2013-01-17T03:27:13.433 に答える