「margin：0auto;」を使用する Internet Explorer8で

81

私はいくつかの高度なIE8テストを行っている最中ですが、IE8では古い使用方法margin: 0 auto;がすべての場合に機能するとは限らないようです。

次のHTMLは、FF3、Opera、Safari、Chrome、IE7、およびIE8互換で中央揃えのボタンを提供しますが、IE8標準では提供しません。

<div style="height: 500px; width: 500px; background-color: Yellow;">
    <input type="submit" style="display: block; margin: 0 auto;" />
</div>

（回避策として、ボタンに明示的な幅を追加できます）。

だから問題は：どのブラウザが正しいのか？それとも、これは動作が定義されていないケースの1つですか？

（私の考えでは、すべてのブラウザーが正しくありません。「display：block」の場合、ボタンの幅を100％にするべきではありませんか？）

更新：私は劣等生です。入力はブロックレベルの要素ではないので、「text-align：center」を使用してdiv内に含める必要があります。とはいえ、好奇心のために、上記の例でボタンを中央に配置するかどうかを知りたいと思います。

恩恵のために：私は例で奇妙なことをしていることを知っています、そして私がアップデートで指摘するように、私はちょうどそれを中央に揃えるべきでした。賞金については、次のような仕様を参照してください。

  1. 「display：block」を設定した場合、ボタンの幅は100％にする必要がありますか？それともこれは未定義ですか？

  2. 表示はブロックなので、「margin：0auto;」にする必要があります。ボタンを中央に配置するかどうか、または未定義ですか？

html  css  internet-explorer-8 
— stusmith
ソース
急いでください：IE8 RTMは今日で、約2時間でダウンロードできるようになります。
— Joel Coehoorn 2009年
まだベータ版であるため、IE8の完全なサポートがないことは、リリース前に修正する必要がある多くの問題の1つにすぎません。
— stusmith 2009年

回答:

71

IE8のバグです。

2番目の質問から始めます：「margin：0 auto」はブロックを中央に配置しますが、ブロックの幅が親の幅よりも小さくなるように設定されている場合に限ります。通常、それらは同じになります。そのため、以下の例のテキストは中央に配置されていません。

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <b style="display: block; margin: 0 auto; ">text</b>
</div>

b要素の表示スタイルがブロックに設定されると、その幅はデフォルトで親の幅になります。CSS仕様 10.3.3通常のフローで置換されていないブロックレベルの要素は、次のように説明します。 。」そこに言及されている平等は

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' =ブロックを含む幅

したがって、通常、すべての自動車は、ブロック幅が含まれているブロックの幅と等しくなる結果になります。

ただし、この計算は、置き換えられた要素であるINPUTには適用しないでください。交換された要素は、通常のフローで10.3.4ブロックレベルの交換された要素でカバーされます。そこにあるテキストは次のように述べています。「「width」の使用値は、インラインで置き換えられた要素と同様に決定されます。」10.3.2インラインで置き換えられた要素の関連部分は、「「width」の計算値が「auto」で、要素に固有の幅がある場合、その固有の幅が「width」の使用値です」です。

CSSが気にするシナリオはIMG要素だと思います。この例のStackoverflowロゴは、すべてのブラウザの中央に配置されます。

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <img style="display: block; margin: 0 auto; " border="0" src="http://stackoverflow.com/content/img/so/logo.png" alt="">
</div>

INPUT要素は同じように動作する必要があります。

— ブチオキサ
ソース
155

追加<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">すると問題が解決します

— パル
ソース
13
DOCTYPEがない場合、IEは自動的にQuirksレンダリングモードになります。参考:-)
— アンディー・マクラゲージ
7
doctypeの前に何かがある場合も失敗します（つまり、コメント、HTMLタグの開始など）
— Shanimal 2012
また、ブートストラップですべてが壊れました
— user956584 2014
5

はい、仕様を100回読んで、正しいと感じる解釈が得られるまでさまざまな部分を組み合わせることができます。しかし、それはまさにブラウザベンダーが行ったことであり、それが私たちが今日の状況にある理由です。

基本的に、要素に100％の幅を適用すると、その親がブロック要素である場合、その親の幅の100％まで拡張する必要があります。margin: 0 auto;すでに使用可能な幅の100％を占めているため、それを中央に配置することはできません。

何かを中央に配置margin: 0 auto;するには、明示的な幅を定義する必要があります。インライン要素を中央に配置するtext-align: center;には、親要素で使用できますが、親に他の子がある場合、これは望ましくない副作用をもたらす可能性があります。

— Wolfr
ソース
5

フォームコントロールはCSSの要素に置き換えられます。

10.3.4通常のフローでブロックレベルの置き換えられた要素

'width'の使用値は、インライン置換要素の場合と同様に決定されます。次に、置換されていないブロックレベル要素のルールが適用され、マージンが決定されます。

したがって、フォームコントロールを100％の幅に引き伸ばさないでください。

ただし、中央に配置する必要があります。IE8の通常のバグのように見えます。特定の幅を設定すると、要素が中央に配置されます。

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />
— コーネル
ソース
3

buti-oxaで説明されているように、これはIE8が置き換えられた要素を処理する方法のバグです。ボタンに明示的な幅を追加したくない場合は、ボタンをインラインブロックに変更して、コンテンツを中央揃えにすることができます。

<div style="height: 500px; width: 500px; background-color: Yellow; text-align: center;">
  <input type="submit" style="display: inline-block;" />
</div>

インラインブロックをサポートしていない古いバージョンのMozilla（FF2を含む）でこれを機能させたい場合はdisplay: -moz-inline-stack;、ボタンに追加できます。

— サイモンダイソン
ソース
2

これが仕様に関連する「バグ」である限り、そうではありません。投稿の質問の作成者として、IEでのこの動作は仕様に従ってフォームコントロールでのみ発生するため、この動作は「未定義」になります。

CSS 2.1は、フォームコントロールとフレームに適用されるプロパティや、CSSを使用してそれらのスタイルを設定する方法を定義していません。ユーザーエージェントは、CSSプロパティをこれらの要素に適用できます。著者は、そのようなサポートを実験的なものとして扱うことをお勧めします。

（http://www.w3.org/TR/CSS21/conform.html#conformance）

乾杯！

2

もう一度：私たちは皆IEが嫌いです！

<div style="width:100%;background-color:blue;">
    <div style="margin:0 auto;width:300px;background-color:red;">
        Not Working
    </div>
</div>

<div style="width:100%;background-color:green;text-align:center;">
    <div style="margin:0 auto;width:300px;background-color:orange;text-align:left;">
        Working, but dumb that you have to use text-align
    </div>
</div>
— ゼロアスタリスク
ソース
2

上記のすべてを試し、これを行うことになります

<div style="width:100%; background-color:red; text-align:center;">
        <div style="width:900px; margin:0 auto; background-color:blue;">
            hello
        </div>
    </div>
— ルスラン・カリモフ
ソース
1

「display：block」の場合、ボタンの幅を100％にするべきではありません。

いいえ。それは、スペース内で垂直方向にそれが唯一のものであることを意味します（他のトリックを使用して他の何かを強制していないと仮定します）。それはそのスペースの幅を埋めなければならないという意味ではありません。

この場合の問題は、inputが本来ブロック要素ではないことだと思います。別のdiv内にネストして、マージンを設定してみてください。しかし、現時点ではこれをテストするためのIE8ブラウザーを持っていないので、それは単なる推測です。

— Joel Coehoorn
ソース
1

「margin：0 auto」は、親要素に「text-align：center」がある場合にのみ、IEの要素を中央揃えにします。

— クリス
ソース
0
  1. 仮定すると、margin: 0 autoその要素を中心にする必要がありますが、幅はそのまま残されている-任意の余白設定を無視し、なるように計算されているもの。
  2. <INPUT>タグをdisplay:blockに設定すると、中央にmargin: 0 auto。が表示されます。

詳細については、ビジュアルフォーマットモデルの詳細-CSS2.1仕様からの幅とマージンの計算を参照してください。関連ビットは次のとおりです。

ブロックフォーマットのコンテキストでは、各ボックスの左外側の端が、含まれているブロックの左端に接触します。

そして

ライン上のインラインボックスの合計幅が、それらを含むラインボックスの幅よりも小さい場合、ラインボックス内の水平方向の分布は、「text-align」プロパティによって決定されます。

最後に

'width'が 'auto'に設定されている場合、他の 'auto'値は '0'になり、 'width'は結果の等式に従います。

'margin-left'と 'margin-right'の両方が 'auto'の場合、それらの使用値は等しくなります。これにより、含まれているブロックのエッジに対して要素が水平方向に中央揃えになります。

— ジョン・アダムズ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.