IE7は、絶対に配置されたフォーム内のインライン入力を中央に配置しません
-
05-07-2019 - |
質問
IE7(互換表示では厳密にIE8)で実行すると、ページに特有のエラーが発生します。 XPモードを使用すると、同様のエラーがIE6で(他のいくつかのエラーとともに)発生しますが、IE6の互換性についてはあまり心配していません。
つまり、入力ボックスは、インライン要素として中央に配置する必要がある場合、左揃えになります。関連する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;
}
関連するHTML:
<form id="prompt">
<input type="text" name="password" id="password" />
</form>
本当に奇妙なことは、falseを返し、コールバック$('#prompt_output').text(' ').css('opacity',0).text('Access granted. Loading...').fadeTo(200,1);
を初期化するフォームで送信リスナーをトリガーすると、すべてが機能することです。入力権自体。実際、コールバックが単なる$('#prompt_output').text(' ')
であっても機能します。要素を選択するだけで$('#prompt_output');
は何もしません。
ご協力いただければ幸いです。
解決
CSS /マークアップを大幅に変更することなく、ie7(ie6ではテストされていません)の問題を解決できると思います。
入力をラベルでラップしてみてください-なぜ機能するのかわかりません。ie7、ie8、firefoxでしかテストしていませんが、うまくいくようです。
<label for="password" class="instruction">
Access restricted: enter password
<br>
<input name="password" id="password" type="text">
</label>
他のヒント
エミュレータでページを実行しましたが、これは明らかにIE7以前ですバージョンの問題。 FFおよびIE8で動作します。しかし、あなたはすでにそれを知っていると思います。
簡単な<!> amp;汚い修正-<body>
を実行する$('#prompt_output').text(' ')
にonloadを追加することにより、単に物事をまっすぐに設定します。
IEがCSSを適切に解釈する方法を知らないと思うので、IE6 / 7のバグを調査する時間があれば、レイアウトを変更することをお勧めします。