web-dev-qa-db-ja.com

「margin：0 auto;」を使用Internet Explorer 8で

私はいくつかの高度なIE8テストを行っていますが、margin: 0 auto;はIE8のすべてのケースで機能するわけではありません。

次のHTMLは、FF3、Opera、Safari、Chrome、IE7、およびIE8互換の中央ボタンを提供しますが、IE8標準では[〜＃〜] not [〜＃〜]です。

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

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

質問は次のとおりです。どのブラウザが正しいですか？または、これは動作が定義されていないケースの1つですか？

（私の考えでは、allブラウザは正しくありません。「表示：ブロック」の場合、ボタンの幅を100％にしないでください。）

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

バウンティの場合：例でおかしなことをしていることはわかっていますが、アップデートで指摘したように、ちょうど中央に揃える必要がありました。バウンティについては、次の仕様を参照してください。答え：

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

  2. 表示はブロックなので、「margin：0 auto;」ボタンを中央に配置するか、しないか、または未定義にしますか？

htmlcssinternet-explorer-8
80
stusmith

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通常のフローのブロックレベルの非置換要素は、「「幅」が「自動」に設定されている場合、他の「自動」値は '0'になり、結果の等式から '幅'が続きます。」

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

そのため、通常、すべてのautoの結果、ブロック幅は包含ブロックの幅に等しくなります。

ただし、この計算は、置換された要素であるINPUTには適用しないでください。置き換えられた要素は、10.3.4ブロックレベル、通常フローで置き換えられた要素でカバーされます。そこにあるテキストは、「「width」の使用値は、インライン置換エレメントについて決定されます。」10.3.2インライン、置換エレメントの関連部分は、「if '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要素は同じように動作する必要があります。

71
buti-oxa

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

155
Pal

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

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

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

5
Wolfr

フォームコントロールは、CSSではreplaced elementsです。

10.3.4ブロックレベル、通常のフローで要素を置換

'width'の使用された値は、インラインで置換された要素として決定されます。次に、非置換ブロックレベル要素のルールが適用され、マージンが決定されます。

そのため、フォームコントロールするべきではないは100％の幅に引き伸ばされます。

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

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />
5
Kornel

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;ボタンに。

3
Simon Dyson

もう一度：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
zeroasterisk

追加 <!doctype html>は、HTML出力の上部にあります。

2
Mohammad Naji

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

<div style="width:100%; background-color:red; text-align:center;">
        <div style="width:900px; margin:0 auto; background-color:blue;">
            hello
        </div>
    </div>
2
Rouslan Karimov

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

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

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

乾杯！

2
Zoffix Znet

「display：block」の場合、ボタンの幅を100％にしないでください

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

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

1
Joel Coehoorn

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

1
Chris
  1. margin: 0 autoと仮定すると、要素は中央に配置する必要がありますが、マージンの設定は無視して、幅はそのままに計算されます。
  2. <INPUT>タグをdisplay:blockに設定した場合、margin: 0 autoを中心に配置する必要があります。

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

ブロックの書式設定コンテキストでは、各ボックスの左外側のエッジは、包含ブロックの左エッジに接触します。

そして

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

最後に

「幅」が「自動」に設定されている場合、他の「自動」値はすべて「0」になり、結果の等式から「幅」が続きます。

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

0
Jon Adams