ページのレンダリング後にli要素が追加された中央のul（テーブルala cssplayのようなスタイル）があり、FirefoxとOpera以外のすべてで美しく機能しているようです。
望ましい効果は、li要素が1つまたは2つしかない場合でも、li要素の行を中央に配置することです。この例は、ページの準備ができてから2秒後にliを追加するjQueryの問題をシミュレートします。
何らかの理由で、Firefox3.05とOpera9.63は、CSSのどこにも幅が指定されていなくても、3番目のliが追加された後の最初の描画幅でulを維持しているようです。
もちろん、これは絶対に私を殺害しているので、助けていただければ幸いです。
http://deadguy.reliccommunity.com/stuffbox/testinggrounds/display-table.html
表示タイプはまだかなり未定義であるため、ここtable-*で異なる動作が得られても驚くことではありません。私の経験では、FF には、挿入されたコンテンツに特定のルールを適用する際にも問題があります。幸いなことに、このページをコード化するためのより直感的な方法があり、それもたまたま機能します。
を に設定するのではなく、<ul/>(デフォルト) のdisplay:tableままにして、 を指定します。この場合、インライン テーブルをシュリンクラップすることは実際には気にしません(これは、コードが達成している最終的な結果です)。テーブル自体を中央に配置するだけです。display:blocktext-align:center<ul/>
おまけとして、これにより ラッピング を削除できます。これは、の余白を押し出す<div/>ための境界を提供するためだけに存在するためです。<ul/>これらの余白はもう使用していないので、単純<ul/>に を包含ブロックとして使用し、代わりに境界線を与えることができます。
私はあなたに本当の答えを与えることはできませんが、他の誰も応答していないので... Firebug（Firefox 3.01）でそれを実行し、CSSスタイルを別の#rounds liものに変更したとき、インラインと言ってからインラインに戻りました-テーブル、レイアウトが自動的に修正されました。したがって、CSS ルールは問題ないように見えます。問題は、余分なリスト項目が Javascript を介して挿入されていることに関連しているようです。また、JQuery を取り除き、W3C DOM スクリプトを挿入して同じことを行うことで、同じ問題を確認しました。
Javascript 経由で何かを挿入したときに、ページが適切にリフローされない Firefox (および Opera だと思います) のバグを見つけたのではないかと思います。
inline-table中に a table、table-cellstableを何も入れずに入れているようですtable-row。これは有効ではないため、ランダムなブラウザーの動作が発生する可能性があります。
いずれにせよ、display: table*サポートが不十分です (特に IE では)。今日のテーブル レイアウトが必要な場合は、実際のテーブルを使用することをお勧めします。何を達成しようとしているのかよくわかりません。Xanthir が示唆しているように、単純なセンタリングを実現するためのより簡単な方法があります。