CSS Menü gebrochen in Firefox (display: table-cell;)

StackOverflow https://stackoverflow.com/questions/605967

Frage

HTML: 

<td align="center" width="100%">
<a class="Forum_ib_moderate" href="Default.aspx" title="Moderate"></a>
<a class="Forum_ib_admin" href="Default.aspx" title="Admin"></a>
...

CSS: 

A.Forum_ib_moderate:link, A.Forum_ib_moderate:visited, A.Forum_ib_moderate:active, A.Forum_ib_moderate:hover
{
background-image: url(images/ib_moderate.png);
background-repeat: no-repeat;
background-position: center;
padding-left: 2px;
padding-right: 2px;
padding-top: 8px;
padding-bottom: 0px;
height: 35px;
width: 35px;
display:table-cell;
}

A.Forum_ib_admin:hover
{
background-image: url(images/ib_admin_hover.png);

}

sieht das Menü nur im IE, zeigt sich vertikal in Firefox. Wenn ich ausschalten "display: table-cell;" in Firebug Stil und dann wieder auf, es behebt dieses Menü Knoten.

irgendwelche Ideen?

P. S .: Ich möchte nicht mit dem Menü zu verwirren selbst, da es ein Teil eines DNN Forum 4.4.3 ist. Ich würde eher die CSS beheben, um es richtig zu machen zeigen.

War es hilfreich?

Lösung

Eigentlich denke ich, werden Sie feststellen, dass der IE funktioniert, weil es ignoriert display: table-cell. Display: table-cell ist eigentlich bist du Problem.

Was ich vermute, passiert ist, dass IE diejenigen ist zurückkehrt Inline-Element zu sein, also horizontal.

Ändern Sie es an: 

display: inline;

fügen Sie einige padding (links und rechts), wie notwendig und Sie bekommen, was Sie wollen.

Alternativ können Sie sie schweben (links und / oder rechts).

Besdies, sie sind bereits in einer Tabellenzelle. Tabellenzelle Anzeige im Innern, dass ist ein bisschen falsch.

Andere Tipps

Wir haben auch in dieser Frage laufen. Noch auf der Suche nach einer Lösung. In unserem Fall müssen wir Anzeige halten. Table-Zellen-Layout

Es scheint manchmal Firefox und scheinbar zufällig, wird table-cell Objekte führt eher zu wickeln als wie eine tatsächliche Tabelle zu handeln. Ein REFRESH behebt es, das macht es nur, dass mehr Bugfix schwierig.

Es scheint ein einfaches FireFox Bug zu sein. Ich traf das Problem umgekehrt: Die DIVs mit Tisch-Zelle untereinander angeordnet nach den Refresh in FF 3.5.9 auf Win XP

.

war ich nicht in der Lage keine Lösung finden (wickeln Sie die Zellen in eine Reihe, Überlauf versteckt, etc), aber FireFox 3.6.3 und hofft, es gibt nur wenige Anwender mit dieser Version.

zu aktualisieren

Das klingt ähnlich wie ein firefox Reflow-Fehler, den ich versuche auch zu beheben. Offenbar Tabellen sind wirklich schlecht für Rendering, da sie ein Reflow verursachen und es scheint, dass Firefox manchmal die Rückfluesse vermisst.

Ich fand die folgenden Seiten hilfreich sein:

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top