IE7 non centra l'input in linea all'interno della forma assolutamente posizionata

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

Domanda

La pagina presenta un errore peculiare durante l'esecuzione in IE7 (rigorosamente IE8 in Visualizzazione compatibilità). Un errore simile si verifica in IE6 quando utilizzo la modalità XP (insieme ad alcuni altri errori), ma non sono troppo preoccupato per la compatibilità con IE6.

Vale a dire, la casella di input è allineata a sinistra quando deve essere centrata come elemento incorporato. CSS pertinente: 

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 pertinente: 

<form id="prompt">
    <input type="text" name="password" id="password" />
</form>

Ora la cosa davvero peculiare è che quando si attiva l'inoltro listener sul modulo, che restituisce false e inizializza il callback $('#prompt_output').text(' ').css('opacity',0).text('Access granted. Loading...').fadeTo(200,1);, tutto funziona. I diritti di input stessi. In effetti, anche quando il callback è solo $('#prompt_output').text(' '), funziona. Basta selezionare l'elemento $('#prompt_output'); non fa nulla.

Qualsiasi aiuto sarebbe apprezzato.

È stato utile?

Soluzione

Senza cambiare drasticamente il CSS / markup penso che questo risolva il problema in ie7 (non testato in ie6).

Prova a avvolgere l'etichetta attorno all'input: non ho idea del perché funzioni e ho testato solo in ie7, ie8 e firefox ma sembra fare il trucco. 

<label for="password" class="instruction">
    Access restricted: enter password
   <br>
   <input name="password" id="password" type="text">
</label>

Altri suggerimenti

Ho eseguito la tua pagina attraverso un emulatore e questo è ovviamente un IE7 e precedenti problema di versioni. Funziona su FF e su IE8. Ma penso che tu lo sappia già.

Ti suggerisco di fare un rapido & amp; correzione sporca - aggiungendo onload a <body> che verrà eseguito $('#prompt_output').text(' '), solo per chiarire le cose. Quando hai il tempo di esplorare i bug di IE6 / 7, ti suggerisco di provare a cambiare il layout, poiché penso che IE non sappia come interpretare correttamente il tuo CSS.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top