css sprites：在IE6和IE7中无法正常工作

Question

我的html表单是：

<div id="account-box">
        <form method="post">
            <label for="username">Username:&nbsp;<span class="input-bg"><input class="login-input" name="loginUser" type="text" /></span></label>&nbsp;&nbsp;
            <label for="password">Password:&nbsp;<span class="input-bg"><input class="login-input" name="loginPass" type="password" /></span></label>
            <input class="submit-button" type="submit" value="Login" />
            <a href="#">Register</a>&nbsp;&nbsp;<a href="#">Forgot Password</a>
        </form> <!-- End of form -->
    </div> <!-- End of account-box div -->

以及上面html的css是：

#account-box { padding-top:10px; width:100%; text-align:center; background:url(images/account-bg.jpg) repeat-x; position:fixed; bottom:0; height:35px;  font-weight:bold; }


#account-box .login-input { color:#444; padding:3px 5px; width:153px; height:19px; border:0; background:url(images/textbox.png) 0 0 no-repeat; }
#account-box .login-input:focus { background:url(images/textbox.png) 0 -25px no-repeat; }


#account-box .submit-button { width:60px; padding:1px; border:2px solid #06c; }
#account-box .submit-button:focus { border:2px solid #900; }

有两个问题;

1. 在IE6中，帐户框div转到页面末尾，而不是当前分辨率的底部。它在IE6中作为页脚。
2. 在IE6和IE7中，当我使用精灵时，它不会在文本输入被聚焦时改变精灵。

Answer 1

IE6不支持position:fixed。

IE6和IE7不支持:focus伪类。

您可以使用position: absolute; position: fixed;在IE6中获取部分功能，这至少会将元素放在某处而不是拉伸它。

您需要使用事件来处理focus / blur以使其在IE6和IE7中正常工作。