CSS sprites : IE6과 IE7에서 올바르게 작동하지 않습니다.

내 html 양식 :CSS sprites : 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에서는 계정 상자 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

postion : 절대적으로 트릭을했지만 스크롤하는 것과 함께 움직이지는 않습니다. 그것은 내가 원하지 않는 오버레이로 남아 있습니다. 또한 초점/흐림 설명을 자세히 설명 할 수 있습니까 – booota

@booota : IE6에는 '고정 된'단순히 존재하지 않으므로 순수 CSS 솔루션은 없습니다. 페이지가 스크롤 될 때 Javascript를 사용하여 요소를 이동시킬 수 있으므로 '고정'과 동일한 효과를 얻을 수 있습니다. 'focus' /'blur' 이벤트를 사용하려면 예를 들어'onfocus = "this.className = 'login-input focus';" onblur = "this.className = 'login-input';"'을 입력 한 다음 포커스가있을 때 CSS의 요소를 대상으로 지정하려면'# account-box .login-input.focus {...} '를 사용하십시오. – Guffa

감사합니다. Guffa. 모자가 너 한테 떨어져있어. – booota

CSS sprites : IE6과 IE7에서 올바르게 작동하지 않습니다.

답변

관련 문제