中心のULはFirefox / Operaで水平方向に拡張しません（Safari、IE6 / 7/8で動作します）

Question

ページのレンダリング後にli要素が追加された中央のul（テーブルala cssplayのようなスタイル）があり、FirefoxとOpera以外のすべてで美しく機能するようです。

望ましい効果は、li要素が1つまたは2つしかない場合でも、li要素の行を中央に配置することです。この例では、ページの準備ができてから2秒後にjQueryがliを追加する問題をシミュレートします。

何らかの理由で、CSSのどこにも幅が指定されていなくても、3番目のliが追加された後、Firefox 3.05およびOpera 9.63はulを最初の描画幅に保持しているようです。

これは、もちろん、絶対に私を殺しているので、助けていただければ幸いです。

http://deadguy.reliccommunity.com/stuffbox/testinggrounds/display -table.html

Answer 1

table-*表示タイプはまだかなり不十分に定義されているため、ここで異なる動作が発生することは驚くことではありません。私の経験では、FFには、挿入されたコンテンツに特定のルールを適用する際にいくつかの問題もあります。幸いなことに、このページをコーディングするより直感的な方法があり、これは work にも起こります。

<ul/>をdisplay:tableに設定するのではなく、display:block（デフォルト）のままにしてtext-align:centerを指定します。この場合、<div/>がインラインテーブルをシュリンクラップすることを実際に気にする必要はありません（コードが達成する最終的な結果です）。テーブル自体を中央に配置するだけです。

ボーナスとして、ラッピング<=>を削除できます。これは、プッシュする<=>のマージンの境界を提供するためだけにあるためです。これらのマージンはもう使用しないので、単に<=>を包含ブロックとして使用し、代わりに境界線を指定できます。

Answer 2

本当の答えを出すことはできませんが、誰も応答していないので... Firebug（Firefox 3.01）でそれを実行し、#rounds liのCSSスタイルを他の何かに変更したとき、たとえばインライン、その後インラインテーブルに戻ると、レイアウトは自動的に修正されました。そのため、CSSルールは問題なく、問題はJavascriptを介して追加のリストアイテムが挿入されるという事実に関連しているように見えます。また、JQueryを削除し、同じことを行うW3C DOMスクリプトを挿入することにより、同じ問題を確認しました。

Firefox（およびOpera、私が推測します）で、JavaScriptを介して挿入されたときにページが適切にリフローされないバグを見つけたのではないかと思っています。

Answer 3

inline-table内にtableを、table-cell内にtable-rowなしでdisplay: table* sを入れているようです。これは有効ではないため、ブラウザの動作がランダムになる可能性があります。

いずれの場合でも、<=>のサポートは不十分です（特にIEでは）。今日のテーブルレイアウトが必要な場合は、実際のテーブルを使用するのが最善です。何を達成しようとしているのかよくわかりません。 Xanthirが示唆しているように、単純なセンタリングを実現するためのより簡単な方法があります。