0

jquery の animate() 関数が IE と FF で完全に正常に動作する Web ページがありますが、Chrome では異常に動作し
ます ここに私のコードがあります

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">

html{
    width:100%;
    height:100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

ul, ol, dl {
    padding: 0;
    margin: 0;
}

.clearFloat{
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#navigation{
    width:100px;
    height:100%;
    position:fixed;
    z-index:1;
    left:0px;
    position:relative;
}
#navigation .title-list{
    width:450px;
    position:relative;
    left:-350px;
    height:100px;
}

#navigation .title{
    width:90px;
    height:30px;
    background-color:#f5f5f2;
    position:absolute;
    right:-90px;
    top:35px;
}

#navigation .image{
    width:100px;
    height:100px;
    float:right;
    background-color:#e5e5e4;
}
#navigation .image_hover{
    width:100px;
    height:100px;
    float:right;
    background-color:#e5e5e4;
    display:none;
}
#navigation .title-list:hover .image{
    display:none;
}
#navigation .title-list:hover .image_hover{
    display:block;
}


#navigation .sub-menu{
    width:350px;
    height:30px;
    float:right;
    background-color:#f5f5f2;
    margin-top:35px;
    position:relative;
}
#navigation .title-list .drop-sub{
    display:none;
}

#navigation .title-list:hover .drop-sub{
    display:block;
    position:absolute;
    z-index:2;
    width:225px;
    right:20px;
    background-color:#CC3;
    padding-top:70px;
}

#navigation .sub-list{
    width:205px;
    padding:10px;
    height:30px;
    background-color:#e5e5e4;
}

#navigation a{
    display:inline-block;
    width:100%;
    height:100%;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $('#navigation .expand').hover(function(){
        $(this).stop().animate({'left':'0px'},'fast');
    }, function(e) {
        $(this).stop().animate({'left':'-350px'},'fast');
    });

});
</script>
</head>

<body>
<div id="navigation">
    <ul>
        <li class="title-list expand"><div class="title">About</div><img src="images/navigation/about.png" class="image" /><img src="images/navigation/about_hover.png" class="image_hover" />
        <div class="sub-menu">
            <div class="drop-sub">
                <div class="sub-list"><a href="#">College</a></div>
                <div class="sub-list"><a href="#">History</a></div>
                <div class="sub-list"><a href="#">Principal's Message</a></div>
                <div class="sub-list"><a href="#">Contact</a></div>
                <div class="sub-list"><a href="#">Gallery</a></div>
            </div>
        </div>
        </li>
        <li class="title-list expand"><div class="title">Academics</div><img src="images/navigation/academics.png" class="image" /><img src="images/navigation/academics_hover.png" class="image_hover" />
        <div class="sub-menu">
            <div class="drop-sub">
                <div class="sub-list"><a href="#">Subjects</a></div>
                <div class="sub-list"><a href="#">Structure</a></div>
            </div>
        </div>
        </li>


    </ul>
</div>

</body>
</html>

このコードを FF または IE で実行し、メニュー項目にカーソルを合わせると、メニュー項目は期待どおりに右方向にアニメーション化されます

このコードをクロムで実行し、メニュー項目の1つにカーソルを合わせると、メニューは最初に少し左に移動し、次に右に移動して予想される位置に移動します

誰にも解決策がありますか？

編集： - - - - - - - - -

これは、Chrome でズームが 110% に設定されているために発生していました。しかし、これを回避するために何ができるかについての解決策は誰にもありますか??

4

1 に答える 1