IE7 не центрирует встроенный ввод внутри абсолютно позиционированной формы
-
05-07-2019 - |
Вопрос
При работе в IE7 на странице возникает определенный сбой (строго IE8 в режиме совместимости). Подобная ошибка возникает в IE6, когда я использую режим XP (вместе с несколькими другими ошибками), но меня не слишком беспокоит совместимость с 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>
Теперь действительно странным является то, что когда вы запускаете обработчик отправки в форме, который возвращает false и инициализирует обратный вызов $('#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. Но я думаю, вы уже это знаете.
Я предлагаю вам сделать быстрый & amp; грязное исправление - добавив onload к <body>
, который будет запускаться $('#prompt_output').text(' ')
, просто чтобы все было понятно.
Если у вас есть время для изучения ошибок IE6 / 7, я предлагаю вам попробовать изменить макет, поскольку я думаю, что IE не знает, как правильно интерпретировать ваш CSS.