jquery scrollTo IE7中的問題

Question

我有一個頁面使用jQuery的scrollTo插件來管理一些功能。當您想要從登錄頁面重置密碼時，它會滾動到一個新窗體而不是將用戶帶到新頁面。當然，這一切都可以正常工作，但IE7。這裏是我的HTML：

<div id="blocksWrapper"> 
    <div id="blocks"> 
     <div id="form" class="block"> 
      <form id="formLogin" action="../index.html" method="post"> 
       <fieldset> 
        <legend>Registered Members Log-in Here</legend> 
        <label for="formLoginEmail">Email Address</label> 
        <input type="text" id="formLoginEmail" name="formLoginEmail" value="Email Address" /> 
        <label for="formLoginPassword">Password</label> 
        <input type="password" id="formLoginPassword" name="formLoginPassword" value="Password" /> 
        <input type="image" src="../images/login/buttonLogin.png" value="Login" id="formLoginSubmit" name="formLoginSubmit" /> 
       </fieldset> 
      </form> 
      <h3 id="register"><a href="#">Register</a></h3> 
      <h3 id="forgot"><a href="#">Forgot Password?</a></h3> 
     </div><!--end form--> 
     <div id="password" class="block"> 
      <form id="formPassword" action="../index.html" method="post"> 
       <fieldset> 
        <legend>Forgot your password?</legend> 
        <h3>Enter your Email Address to reset your password</h3> 
        <p>By selecting &lsquo;Reset Password&rsquo; you certify that the email address contained in this field is your email address.</p> 
        <label for="formPasswordEmail">Email Address</label> 
        <input type="text" id="formPasswordEmail" name="formPasswordEmail" value="Email Address" /> 
        <input type="image" src="../images/login/buttonResetPassword.png" value="Reset Password" id="formPasswordSubmit" name="formLoginSubmit" /> 
       </fieldset> 
      </form>         
     </div><!--end password--> 
     <div id="confirm" class="block"> 
      <h2>Confirmation Sent</h2> 
      <h3>Please check your email for instructions <br />on resetting your password.</h3> 
      <p>Your confirmation email will come from donotreply@mygrizzly.com. Be sure to add this to your spam filter so you will be able to receive this email.</p> 
      <h4><a href="#">Return to login screen</a></h4> 
     </div><!--end confirm--> 
    </div><!--end blocks--> 
</div> 

我的CSS（所有應該的問題）：

.login #content #blocksWrapper { 
    background: url(../images/login/bgBlock.png); 
    height: 127px; 
    margin: 0 0 50px 9px; 
    overflow: hidden; 
    padding: 20px 18px; 
    width: 437px; 
} 

.login #content #blocks { 
    height: 127px; 
    overflow: hidden; 
    width: 1377px; 
} 

.login #content .block { 
    float: left; 
    height: 127px; 
    margin-right: 18px; 
    position: relative; 
    width: 441px; 
} 

而且我的jQuery：

$('#forgot a').click(function() { 
    $('#blocksWrapper').scrollTo({left: 459, top: 0}, 400); 
    return false; 
}); 

$('#formPasswordSubmit').click(function() { 
    $('#blocksWrapper').scrollTo({left: 918, top: 0}, 400); 
    return false; 
}); 

$('#confirm h4 a').click(function() { 
    $('#blocksWrapper').scrollTo({left: 0, top: 0}, 200); 
    return false; 
}); 

摘錄生活在這個頁面上的代碼：[固定時節錄]

正如你所看到的，它可以在除IE7以外的所有瀏覽器中正常工作。在IE7中，它正在滾動#blocksWrapper div的背景，而不是#blocks div的內容。由於某些原因，IE7也沒有隱藏溢出。有人有主意嗎？

我試過使用#blocks作爲我的jQuery選擇器，這不是問題。

由於一噸， 馬庫斯

Answer 1

我能夠通過添加位置，解決此問題：相對於包裝元素。

.login #content #blocksWrapper { 
    background: url(../images/login/bgBlock.png); 
    height: 127px; 
    margin: 0 0 50px 9px; 
    overflow: hidden; 
    padding: 20px 18px; 
    position: relative; 
    width: 437px; 
}