2

CSSのみを使用してスライドアウトログインボックスを実行しています。私が直面している問題は、FireFox（Firefox 16.0を使用しています）では、スライドアウトアニメーションがちらつくことです。ChromeとSafariでは正常に動作します（IEにはアニメーションはありませんが、ちらつきはなく、ログインボックスは正常に表示されます）。HTMLは次のとおりです。

<div id="slideout">
        <div id="slideout_inner">
             <form id="loginForm" action="#" method="POST">
                <table cellspacing="0">
                    <tbody>
                        <tr>
                            <td><label for="lUsername">Username</label></td>
                            <td><label for="lPassword">Password</label></td>
                        </tr>
                        <tr>
                            <td><input type="text" name="username" id="lUsername" class="required" /></td>
                            <td><input type="password" name="password" id="lPassword" class="required" /></td>
                            <td><input type="submit" value="Login" /></td>
                        </tr>
                        <tr>
                            <td><span class="error"></span></td>
                            <td><span class="error"></span></td>
                        </tr>

                    </tbody>
                </table>
            </form>
        </div>
        <label>Login</label>

これがCSSです

#slideout {
  position: fixed;
  top: 0px;
  left: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout_inner {
  position: fixed;
  top: -250px;
  left: 0px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout:hover{
  top: 250px;
}
#slideout:hover #slideout_inner{
  top: 0;
}

これが問題のJSFiddleです。Firefoxのちらつきを修正するにはどうすればよいですか？ありがとう

4

1 に答える 1

3

このJSFiddleはあなたを助けることができるかもしれません。

このように書いてください：

#slideout {
  position: fixed;
  top: 0;
  left: 0;
}
#slideout_inner{
    height:0;
    -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  overflow:hidden;
}
#slideout:hover #slideout_inner{
  height:200px;
  border:1px solid red;
}

また

このJSFiddle。

于 2012-10-26T11:46:04.737 に答える