81

私はいくつかの事前のIE8テストを行っているところですが、margin: 0 auto;IE8ではすべての場合に使用する古い手法が機能しないようです。

次の 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. 「表示：ブロック」に設定した場合、ボタンは幅100％にする必要がありますか？それともこれは未定義ですか？

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

4

12 に答える 12

156

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

于 2010-10-05T21:48:55.540 に答える
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' = 包含ブロックの幅

そのため、通常、すべての auto はブロック幅が含まれているブロックの幅と等しくなります。

ただし、この計算は、置き換えられる要素である INPUT には適用されません。置換された要素は、 10.3.4 ブロック レベルの通常のフローで置換された要素でカバーされます。そこにあるテキストには、「「幅」の使用値は、インラインで置換された要素と同様に決定されます。」10.3.2 インラインで置換された要素の関連部分は次のとおりです。

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 要素も同じように動作する必要があります。

于 2009-05-02T18:36:31.933 に答える
5

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

10.3.4 ブロックレベル、通常の流れで置き換えられる要素

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

そのため、フォーム コントロールを 100% 幅に拡大しないでください。

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

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />
于 2009-05-04T04:06:08.640 に答える
5

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

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

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

于 2009-05-03T09:14:55.457 に答える
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;、ボタンに追加できます。

于 2009-06-08T11:46:33.613 に答える
2

上記のすべてを試して、最終的にこれを行う

<div style="width:100%; background-color:red; text-align:center;">
        <div style="width:900px; margin:0 auto; background-color:blue;">
            hello
        </div>
    </div>
于 2012-04-08T21:11:24.243 に答える
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>
于 2010-03-03T14:46:35.610 に答える
2

<!doctype html>HTML 出力の先頭に追加します。

于 2013-08-11T08:04:05.610 に答える
2

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

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

( http://www.w3.org/TR/CSS21/conform.html#conformance )

乾杯！

于 2009-08-19T12:26:27.727 に答える
1

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

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

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

于 2009-03-19T14:10:22.337 に答える
1

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

于 2009-03-19T14:32:16.497 に答える
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'の場合、それらの使用値は等しくなります。これにより、要素が含まれているブロックのエッジに対して水平方向に中央に配置されます。

于 2009-04-30T15:07:10.580 に答える