IE7は、絶対に配置されたフォーム内のインライン入力を中央に配置しません

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

質問

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のバグを調査する時間があれば、レイアウトを変更することをお勧めします。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top