Zentriert UL wird in Firefox / Opera nicht horizontal erweitern (funktioniert in Safari, IE6 / 7/8)

Question

Ich habe eine zentrierte ul (gestylt wie eine Tabelle ala CSSplay), die li-Elemente hinzugefügt, um es nach Seite machen, und es scheint, in allen Dingen zu arbeiten, schön, aber Firefox und Opera ist zu haben.

Der gewünschte Effekt ist die Reihe von li Elemente haben zentriert, auch wenn es nur ein oder zwei von ihnen. Dieses Beispiel simuliert das Problem mit jQuery Hinzufügen eines li zwei Sekunden, nachdem die Seite fertig ist.

Aus irgendeinem Grund scheint es, wie Firefox 3.05 und Opera 9.63 die ul bei der anfänglichen Ziehbreite halten nach dem dritten li hinzugefügt wird, obwohl es keine Breite überall in der CSS angegeben ist.

Das ist natürlich absolut ermordet mich, und jede Hilfe würde geschätzt.

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

Answer 1

Die table-* Display-Typen sind immer noch recht unterbestimmt, und es ist also keine Überraschung, dass Sie ein anderes Verhalten hier sind immer. Nach meiner Erfahrung hat FF auch einige Probleme mit der Anwendung bestimmter Regeln eingeführt Inhalt. Zum Glück aber gibt es eine intuitive Art und Weise diese Seite zu kodieren, die auch geschieht Arbeit .

Anstatt die <ul/> Einstellung display:table, lassen Sie es als display:block (Standardeinstellung) und geben Sie es text-align:center. Sie haben nicht wirklich egal, dass die <ul/> die Inline-Tabellen in diesem Fall shrinkwraps (das ist das Nettoergebnis, dass Ihr Code zu erreichen), Sie wollen nur die Tabellen selbst zentriert werden.

Als Bonus können Sie hier die Verpackung <div/> entfernen, da es nur gibt es eine Grenze für die Margen des <ul/> zu bieten off drücken von. Da Sie nicht mehr diese Margen verwenden, können Sie einfach die <ul/> als umschließende Block verwenden, und geben Sie ihm die Grenze statt.

Answer 2

kann ich Ihnen keine wirkliche Antwort geben, aber da sonst niemand geantwortet hat ... ich durch sie in Firebug lief (in Firefox 3.01), und wenn ich die CSS-Stil #rounds li auf etwas anderes verändert, sagen inline, dann zurück zu inline-Tabelle, korrigiert das Layout selbst. So sieht es aus wie Ihre CSS-Regeln nur in Ordnung sind, und dass das Problem mit der Tatsache verbunden ist, dass das zusätzliche Listenelement wird durch Javascript eingefügt. Ich habe auch, dass durch immer von JQuery befreien und ein W3C-DOM-Skripts einfügen, das Gleiche zu tun, und sicher genug, die gleiche Problem.

Ich frage mich, wenn Sie einen Fehler in Firefox gefunden haben könnten (und Opera, ich denke), wo die Seite nicht richtig aufgeschmolzen wird, wenn die Dinge über Javascript eingefügt werden.

Answer 3

Sie scheinen eine inline-table in einem table zu setzen, und table-cells innerhalb table ohne table-row. Da dies nicht gültig ist, könnte jedes beliebige Browserverhalten zur Folge hat.

In jedem Fall wird display: table* schlecht unterstützt (vor allem in IE). Wenn Sie Tabellenlayout wollen heute ist es am besten mit dem tatsächlichen Tabellen bleiben. Nicht ganz sicher, was Sie erreichen wollen; wie Xanthir schlägt vor, es gibt einfachere Wege, einfache Zentrierung zu erreichen.