IE7 não centro em linha de entrada dentro absolutamente posicionado forma
-
05-07-2019 - |
Pergunta
A página apresenta uma falha peculiar ao ser executado no IE7 (estritamente IE8 no modo de exibição de compatibilidade). Um erro semelhante ocorre no IE6 quando eu usar o modo XP (juntamente com alguns outros erros), mas eu não estou muito preocupado com a compatibilidade IE6.
Designadamente, a caixa de entrada está alinhada à esquerda quando deve ser centrado como um elemento em linha. CSS relevante:
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 relevante:
<form id="prompt">
<input type="text" name="password" id="password" />
</form>
Agora, a coisa realmente peculiar é que, quando você acionar o ouvinte enviar no formulário, que retorna falso e inicializa o $('#prompt_output').text(' ').css('opacity',0).text('Access granted. Loading...').fadeTo(200,1);
callback, tudo funciona. A própria direitos de entrada. Na verdade, mesmo quando o retorno é apenas $('#prompt_output').text(' ')
, ele funciona. Apenas selecionando o elemento $('#prompt_output');
não faz nada.
Qualquer ajuda seria apreciada.
Solução
Sem alterar drasticamente o CSS / marcação Acho que isso resolve o problema no IE7 (não testado no IE6).
Tente envolver o rótulo ao redor da entrada -. Eu não tenho idéia por que ela funciona e eu só testei no IE7, IE8 e Firefox, mas parece fazer o truque
<label for="password" class="instruction">
Access restricted: enter password
<br>
<input name="password" id="password" type="text">
</label>
Outras dicas
Já corri sua página através um emulador e este é, obviamente, um IE7 e anterior problema versões. Ele funciona em FF e no IE8. Mas eu acho que você já sabe disso.
Eu sugiro que você faça uma solução rápida e suja - adicionando onload ao <body>
que será executado $('#prompt_output').text(' ')
, só para as coisas série direta.
Quando você tem o tempo para explorar IE6 / 7 erros, eu sugiro que você tentar mudar o layout, desde que eu acho que o IE não sabe como interpretar o seu CSS corretamente.