ホームページ >ウェブフロントエンド >CSSチュートリアル >IE8 標準モードで「margin: 0 auto;」が入力要素を中央に配置しないのはなぜですか?
IE8 標準モードで「margin: 0 auto;」が入力要素を中央に配置しないのはなぜですか?
- DDDオリジナル
- 2024-11-29 16:46:10449ブラウズ
IE8「margin: 0 auto;」との不一致入力要素
要素の中央揃えに広く使用されているにもかかわらず、「margin: 0 auto;」プロパティは IE8 で一貫性のない動作を示しているようです。最近の報告では、ブロック要素で囲まれた入力要素が IE8 の標準モードで中央に配置されませんでした。
問題の HTML コードは次のとおりです。
<div>
ブラウザ互換性
IE8 標準モードで要素が不適切にセンタリングされる問題は、以下を含む多数のブラウザで観察されます:
- Firefox 3
- Opera
- Safari
- Chrome
- IE7 互換モード
ただし、IE8 標準には存在しませんmode.
根本的な問題
この動作の背後にある原因は、入力要素が本質的にブロック レベルの要素ではないという事実です。 「display: block」が入力に適用されると、それが効果的にブロックレベルの要素に変換され、「margin: 0 auto;」が行われます。
解決策
この問題を解決するには、開発者は入力要素の幅を明示的に設定するか、入力要素をブロックレベルの要素内に含めて「 text-align: center" をコンテナに配置します。
仕様参照
CSS 2.1 仕様によると:
- 非ブロックレベル要素の「display: block」は明示的な幅を指定しません。
- 「マージン: 0 自動;」ブロックレベルの要素では、親要素内で水平方向に中央に配置されます。
したがって、「margin: 0 auto;」で入力要素を中央に配置しないブラウザの動作は、仕様によれば、これは正しくありません。
注: DOCTYPE 宣言を追加すると、場合によっては問題が解決されることがあります。次の使用を検討してください:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
以上がIE8 標準モードで「margin: 0 auto;」が入力要素を中央に配置しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。