IE7 nicht Zentrieren nicht Inline-Eingang im Inneren absolut positioniert Form

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

Frage

Die Seite erfährt einen eigentümlichen Fehler, wenn in IE7 (streng IE8 in Kompatibilitätsansicht) ausgeführt wird. Ein ähnlicher Fehler tritt in IE6, wenn ich XP Modus (zusammen mit ein paar anderen Fehler), aber ich bin nicht allzu besorgt über IE6 Kompatibilität.

Und zwar wird das Eingabefeld linksbündig, wenn es sollte als ein Inline-Element zentriert werden. Relevante CSS: 

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; 
}

Relevante HTML: 

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

Nun ist die wirklich eigenartige Sache ist, dass, wenn Sie den Hörer einreichen auf dem Formular auslösen, was falsch zurück und initialisiert den Rückruf $('#prompt_output').text(' ').css('opacity',0).text('Access granted. Loading...').fadeTo(200,1);, alles funktioniert. Der Eingang Rechte selbst. In der Tat, auch wenn der Rückruf nur $('#prompt_output').text(' ') ist, funktioniert es. Gerade das Element $('#prompt_output'); Auswahl nicht alles tun.

Jede mögliche Hilfe würde geschätzt.

War es hilfreich?

Lösung

Ohne drastisch die CSS / Markup zu ändern Ich denke, das Problem in IE7 löst (nicht in IE6 getestet).

Versuchen Sie das Etikett um den Eingang Einwickeln -. Ich habe keine Ahnung, warum es funktioniert, und ich habe nur in IE7, IE8 und Firefox getestet, aber es scheint, den Trick zu tun 

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

Andere Tipps

Ich habe Ihre Seite durch einen Emulator laufen und dies offensichtlich ein IE7 und vorherige Versionen Problem. Es funktioniert auf FF und IE8. Aber ich glaube, Sie bereits wissen.

Ich schlage vor, Sie eine quick & dirty fix tun - indem Sie auf die <body> Zugabe onload die $('#prompt_output').text(' ') laufen, nur um die Dinge wieder gerade. Wenn Sie die Zeit haben IE6 / 7 Bugs zu erkunden, ich schlage vor, Sie versuchen, das Layout zu ändern, da ich denke, IE nicht weiß, wie CSS richtig zu interpretieren.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top