IE7 не центрирует встроенный ввод внутри абсолютно позиционированной формы

StackOverflow https://stackoverflow.com/questions/1801435

Вопрос

При работе в 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.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top