IE7 não centro em linha de entrada dentro absolutamente posicionado forma

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

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.

Foi útil?

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.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top