0

我有一个网页，其中 jquery 的 animate() 函数在 IE 和 FF 中运行良好，但是在 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 中运行此代码并将鼠标悬停在菜单项上时，菜单项按预期向右移动

当我在 chrome 中运行此代码并将鼠标悬停在其中一个菜单项上时，菜单首先向左移动一点，然后向右移动到其预期位置

有人有解决方案吗？

编辑： - - - - - - - - -

发生这种情况是因为在 Chrome 中缩放设置为 110%。但是，任何人都有解决方案来避免这种情况？

4

1 回答 1

1

这是因为 Chrome 中的定位设置为自动，在页面加载时。

如果您首先在 jQuery 中将left设置为页面加载时应该设置的值，那么您应该没问题。

于 2014-05-19T11:15:27.223 回答