Jquery scrollTo在IE7中出现问题 [英] Jquery scrollTo issues in IE7

问题描述

我有一个页面使用jQuery的scrollTo插件来管理一些功能。如果要从登录页面重置密码，它会滚动到新表单，而不是将用户带到新页面。当然，除了IE7之外，一切都运行良好。这是我的HTML：

I have a page that uses jQuery's scrollTo plugin to manage some functionality. When you want to reset your password from the login page, it scrolls to a new form rather than taking the user to a new page. It all works fine everywhere but IE7, of course. Here's my 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 [e-mail]. 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（这一切都很重要）：

My CSS (all that should matter):

.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;
});

此页面上的代码摘录：[修正时编辑]

The code excerpts live on this page: [redacted when fixed]

正如您所看到的，它在除IE7之外的所有浏览器中都能正常工作。在IE7中，它滚动#blocksWrapper div的背景而不是#blocks div的内容。由于某种原因，IE7也没有隐藏溢出。有人有主意吗？

As you can see, it works fine in all browsers other than IE7. In IE7, it's scrolling the background of the #blocksWrapper div rather than the contents of the #blocks div. IE7 is also not hiding the overflow for some reason. Anyone have any ideas?

我尝试使用#blocks作为我的jQuery选择器进行测试，这不是问题。

I've tried testing using #blocks as my jQuery selector, and that isn't the issue.

非常感谢，
Marcus

Thanks a ton, Marcus

推荐答案

我能够通过添加位置来解决这个问题：相对于包装元素。

I was able to resolve this by adding position:relative to the wrapper element.

.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;
}

这篇关于Jquery scrollTo在IE7中出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！