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

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

0 голосов
/ 26 ноября 2009

При работе в 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'); ничего не делает.

Любая помощь будет оценена.

Ответы [ 2 ]

1 голос
/ 26 ноября 2009

Без кардинального изменения CSS / разметки я думаю, что это решает проблему в ie7 (не тестировалась в ie6).

Попробуйте обернуть ярлык вокруг ввода - я понятия не имею, почему он работает, и я тестировал только в ie7, ie8 и firefox, но, похоже, это помогает. 

<label for="password" class="instruction">
    Access restricted: enter password
   <br>
   <input name="password" id="password" type="text">
</label>
0 голосов
/ 26 ноября 2009

Я пропустил вашу страницу через эмулятор , и это, очевидно, проблема IE7 и предыдущих версий. Работает на FF и IE8. Но я думаю, вы уже это знаете.

Я предлагаю вам сделать быстрое и грязное исправление - добавив onload к <body>, который будет запускать $('#prompt_output').text(' '), просто для того, чтобы все исправить. Если у вас есть время для изучения ошибок IE6 / 7, я предлагаю вам попробовать изменить макет, поскольку я думаю, что IE не знает, как правильно интерпретировать ваш CSS.

...