IE7 ne centre pas l'entrée en ligne à l'intérieur d'une forme positionnée de manière absolue

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

Question

La page rencontre un échec particulier lorsqu'elle est exécutée dans IE7 (strictement IE8 dans l'affichage de compatibilité). Une erreur similaire se produit dans IE6 lorsque j'utilise le mode XP (avec quelques autres erreurs), mais la compatibilité avec IE6 ne me préoccupe pas trop.

À savoir, la zone de saisie est alignée à gauche lorsqu'elle doit être centrée en tant qu'élément en ligne. CSS pertinentes: 

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

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

Maintenant, ce qui est vraiment étrange, c'est que lorsque vous déclenchez l'écouteur d'envoi sur le formulaire, qui renvoie false et initialise le rappel $('#prompt_output').text(' ').css('opacity',0).text('Access granted. Loading...').fadeTo(200,1);, tout fonctionne. Les droits d'entrée eux-mêmes. En fait, même lorsque le rappel est juste $('#prompt_output').text(' '), cela fonctionne. Sélectionner simplement l'élément $('#prompt_output'); ne fait rien.

Toute aide serait appréciée.

Était-ce utile?

La solution

Sans changer radicalement le CSS / le balisage, je pense que cela résout le problème dans ie7 (non testé dans ie6).

Essayez d’enrouler l’étiquette autour de l’entrée - je ne sais pas pourquoi cela fonctionne et je n’ai testé que dans ie7, ie8 et firefox, mais cela semble suffire. 

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

Autres conseils

J'ai parcouru votre page via un émulateur . Il s'agit évidemment d'un IE7 et des précédents. problème de versions. Cela fonctionne sur FF et sur IE8. Mais je pense que vous le savez déjà.

Je vous suggère de faire un rapide & ampli; Correctif - en ajoutant onload au <body> qui exécutera $('#prompt_output').text(' '), juste pour mettre les choses au clair. Lorsque vous avez le temps d’explorer les bogues IE6 / 7, je vous suggère d’essayer de changer la disposition, car je pense que IE ne sait pas interpréter correctement votre code CSS.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top