CSS精灵：未在IE6和IE7

正常工作

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

有两个问题;

在IE6中，account-box div会转到页面的末尾而不是当前分辨率的底部。它在IE6中用作页脚。
在IE6和IE7中，当我使用精灵时，它不会在文本输入焦点时更改精灵。

来源

2011-04-06 booota

IE6不支持position:fixed。

IE6和IE7不支持:focus伪类。

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

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

来源

2011-04-06 07:11:49 Guffa

位置：绝对没有窍门，但它不随滚动而移动。它保持为我不想要的叠加层。另外，你可以详细说明焦点/模糊描述 – booota 2011-04-06 07:19:50

@booota：由于'固定'根本不存在于IE6中，因此没有纯粹的CSS解决方案。当页面滚动时，您可以使用Javascript来移动元素，以便获得与'fixed'相同的效果。要使用'focus' /'blur'事件，你可以使用'onfocus =“this.className ='登录输入焦点';” onblur =“this.className ='login-input';”'在输入上，然后使用'＃account-box .login-input.focus {...}来定位CSS中具有焦点的元素。 – Guffa 2011-04-06 11:33:39

谢谢Guffa。向你致敬 – booota 2011-04-06 18:41:44

CSS精灵：未在IE6和IE7

回答

相关问题