IE7은 절대적으로 위치 된 형태의 인라인 입력을 중심으로하지 않습니다.
-
05-07-2019 - |
문제
이 페이지는 IE7에서 실행할 때 독특한 실패를 경험합니다 (엄격하게 IE8 호환성보기). XP 모드를 사용할 때 (다른 오류와 함께) IE6에서도 비슷한 오류가 발생하지만 IE6 호환성에 대해 너무 걱정하지 않습니다.
즉, 입력 상자는 인라인 요소로 중앙에 위치해야 할 때 좌회전됩니다. 관련 CSS :
form#prompt {
position: absolute;
height: 300px;
width: 600px;
margin: -150px 0 0 -300px;
top: 50%;
left: 50%;
text-align: center;
}
input#password {
margin: 10px auto;
padding: 5px 10px;
text-align: center;
width: 398px;
display: inline;
}
관련 HTML :
<form id="prompt">
<input type="text" name="password" id="password" />
</form>
이제 정말 독특한 것은 양식에서 제출자를 트리거 할 때 거짓을 반환하고 콜백을 초기화한다는 것입니다. $('#prompt_output').text(' ').css('opacity',0).text('Access granted. Loading...').fadeTo(200,1);
, 모든 것이 작동합니다. 입력 권한 자체. 사실, 콜백이 정당한 경우에도 $('#prompt_output').text(' ')
, 효과가있다. 요소 만 선택합니다 $('#prompt_output');
아무것도하지 않습니다.
모든 도움이 감사하겠습니다.
해결책
CSS/마크 업을 크게 변경하지 않고 IE7에서 문제를 해결한다고 생각합니다 (IE6에서 테스트되지 않음).
입력 주위에 레이블을 감싸십시오. 왜 그것이 작동하는지 모르겠습니다. IE7, IE8 및 Firefox에서만 테스트했지만 트릭을 수행하는 것 같습니다.
<label for="password" class="instruction">
Access restricted: enter password
<br>
<input name="password" id="password" type="text">
</label>
다른 팁
나는 당신의 페이지를 실행합니다 에뮬레이터 그리고 이것은 분명히 IE7 및 이전 버전 문제입니다. FF 및 IE8에서 작동합니다. 그러나 나는 당신이 이미 그것을 알고 있다고 생각합니다.
onload를 <body>
그것은 실행 될 것입니다 $('#prompt_output').text(' ')
, 단지 물건을 똑바로 세우기 위해. IE6/7 버그를 탐색 할 시간이 있으면 CS를 올바르게 해석하는 방법을 모르기 때문에 레이아웃을 시도하고 변경하는 것이 좋습니다.