Firefox ignore positionnement absolu dans les cellules de tableau

Je suis en train de absolument la position d'un élément à l'intérieur d'une cellule de tableau.
La TD a position:relative et l'élément a position:absolute.

Cela fonctionne très bien dans tous les navigateurs, sauf dans Firefox où il est positionné par rapport à un ancêtre par rapport conteneur.

Vous pouvez le voir reproduit dans ce violon: http://jsfiddle.net/ac5CR/1/

Quelqu'un sait-il si je manque un peu de CSS paramètre qui permet de résoudre que dans Firefox?

  • Dans firefox, le vert indicator div est situé dans la première rangée, et il devrait être dans la 3e rangée comme dans chrome et IE.
  • On dirait que vous êtes à l'aide de les tableaux de mise en page. Êtes-vous?
  • unfortunalty je ne. Je suis à l'aide de jqGrid qui utilise des tables à l'intérieur. J'ai de la position d'un indicateur à l'intérieur d'une cellule.
InformationsquelleAutor Variant | 2012-01-09
  1. 20

    l'élément n'est pas un élément de type block.
    ajouter au style display:block, vous obtiendrez le besoin de comportement.

    • En effet, elle fonctionne maintenant bien que la TD s'arrête de se comporter comme une cellule de tableau... je dois préciser explicite de la hauteur de la cellule pour l'harmoniser avec le reste des cellules.
    • De l'expansion, le td de l'élément d'affichage par défaut la valeur est généralement "table-cell" (et compte tenu de Firefox soutien à la "table-cell" affichage de la valeur, il est probable que la valeur par défaut).
    • Awh homme merci!
    • Viens de tomber sur cette question - est-ce à dire que vous ne pouvez pas positon: absolute à l'intérieur d'un tableau de mise en page?
    • En fait, c'est un bug Firefox, qui a déjà été fixé (depuis la version 31, Firefox position absolue descendants par rapport à des cellules de tableau, tout comme d'autres navigateurs).
    InformationsquelleAutor banners
  2. 15

    Contourner ce serait pour envelopper le position:absolute élément à un autre position:relative div. Il nécessite une div, qui est boiteux, mais vous donnera le bon résultat.

    Exemple: http://jsfiddle.net/pTJUk/

    Remarque: ce ne seront toujours pas donner un complètement résultat correct, comme le position:relative div sera par rapport à la la position du texte dans le td -- fou, non? Donnant à la cellule un vertical-align:top fera orient à 0,0, mais bien sûr, cela peut être au détriment d'autres, le formatage de votre conception exige.

    • J'ai eu un problème similaire d'obtenir un <a> à s'accroître avec les cellules adjacentes. Mettre un <div style="position:relative;> à l'intérieur de la <td> tout s'est mis au travail. Jusqu'à présent je n'ai rencontré aucun problème sur plusieurs navigateurs.
    InformationsquelleAutor David Woods
  3. 1

    C'était un très vieux bug Firefox qui ont été corrigés près de 13 ans après avoir été déclaré!

    Vous pouvez vous référer à la ludique de l'histoire ici:
    https://bugzilla.mozilla.org/show_bug.cgi?id=63895

    InformationsquelleAutor Ashraf Sabry