IE7 no centra la entrada en línea dentro de una forma absolutamente posicionada

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

Pregunta

La página experimenta una falla peculiar cuando se ejecuta en IE7 (estrictamente IE8 en Vista de compatibilidad). Un error similar ocurre en IE6 cuando uso el modo XP (junto con algunos otros errores), pero no estoy demasiado preocupado por la compatibilidad de IE6.

A saber, el cuadro de entrada está alineado a la izquierda cuando debe centrarse como un elemento en línea. 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>

Ahora lo realmente peculiar es que cuando activa el escucha de envío en el formulario, que devuelve falso e inicializa la devolución de llamada $('#prompt_output').text(' ').css('opacity',0).text('Access granted. Loading...').fadeTo(200,1);, todo funciona. Los derechos de entrada en sí. De hecho, incluso cuando la devolución de llamada es solo $('#prompt_output').text(' '), funciona. Simplemente seleccionar el elemento $('#prompt_output'); no hace nada.

Cualquier ayuda sería apreciada.

¿Fue útil?

Solución

Sin cambiar drásticamente el CSS / marcado, creo que esto resuelve el problema en ie7 (no probado en ie6).

Intente ajustar la etiqueta alrededor de la entrada; no tengo idea de por qué funciona y solo lo he probado en ie7, ie8 y firefox, pero parece que funciona. 

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

Otros consejos

He ejecutado su página a través de un emulador y esto es obviamente un IE7 y anterior problema de versiones Funciona en FF y en IE8. Pero creo que ya lo sabes.

Te sugiero que hagas un amplificador & rápido; corrección sucia: agregando onload a <body> que se ejecutará $('#prompt_output').text(' '), solo para aclarar las cosas. Cuando tenga tiempo para explorar los errores de IE6 / 7, le sugiero que intente cambiar el diseño, ya que creo que IE no sabe cómo interpretar su CSS correctamente.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top