Menu CSS cassé dans Firefox (display: table-cell;)
https://stackoverflow.com/questions/605967
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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);
}
le menu est très beau dans IE, s’affiche verticalement dans Firefox. Si je désactive & display; display: table-cell; " style dans Firebug puis rallumez-le, il corrige ce nœud de menu.
des idées?
p.s: je ne veux pas me mêler du menu lui-même, car il fait partie d'un forum DNN 4.4.3. Je préfère corriger le CSS pour qu'il s'affiche correctement.
La solution
En fait, je pense que vous constaterez que IE fonctionne parce qu'il ignore display: table-cell . Affichage: la cellule de la table est en fait votre problème.
Ce que je suppose, c’est que IE convertit ces éléments en un élément en ligne, donc horizontal.
Changez-le en:
display: inline;
ajoutez un peu de marge (à gauche et à droite) si nécessaire et vous obtiendrez ce que vous voulez.
Vous pouvez également les faire flotter (à gauche et / ou à droite).
Besdies, ils sont déjà dans une cellule de tableau. L’affichage des cellules de tableau à l’intérieur est un peu faux.
Autres conseils
Nous avons également rencontré ce problème. Toujours à la recherche d'une solution. Dans notre cas, nous devons garder l’affichage suivant: disposition tableau-cellule.
Il semble que parfois et apparemment de manière aléatoire, Firefox fait en sorte que les objets de cellules de tableau soient renvoyés à la place, plutôt que de se comporter comme un tableau. Un rafraîchissement le corrige, ce qui le rend encore plus difficile à corriger.
Semble être un simple bug FireFox. J'ai rencontré le problème dans l'autre sens: les DIV avec une cellule de tableau disposées l'une en dessous de l'autre après l'actualisation dans FF 3.5.9 sous Win XP.
Je n'ai pas pu trouver de solution (envelopper les cellules dans une ligne, débordement masqué, etc.), mais mettre à jour FireFox vers 3.6.3 et espérer que peu d'utilisateurs possèdent cette version.
Cela ressemble à un bogue firefox reflow que je tente également de corriger. Apparemment, les tableaux sont vraiment mauvais pour le rendu, car ils provoquent un reflux et il semble que Firefox manque parfois les reflux.
Les pages suivantes ont été utiles:
