La CSS de Positionnement Absolu dans les cellules d'un tableau ne fonctionne pas sous Firefox

Je ne peux pas comprendre ce problème de positionnement dans Firefox. Il ne semble pas suivre le positionnement absolu de la règle. Est-il quelque chose que je fais qui ne devrait pas être fait, mais certains browesers de la gérer et de certaines de ne pas?

JS Fiddle:

Original - http://jsfiddle.net/g9qzh/

Mise à jour - http://jsfiddle.net/g9qzh/2/

Fonctionne dans IE, Chrome, Safari, Opera

Voici le code réel. Permettez-moi de savoir si je ne suis pas en suivant un certain type de standard, je ne sais pas.

HTML:

<table>
    <tr>
        <td>
            <div id="three">Three</div>
            <div id="two">Two</div>
        </td>
    <tr>
    <tr>
        <td>
            <div id="three">Three</div>
            <div id="two">Two</div>
        </td>
    <tr>
</table>

CSS:

#two {
   position: absolute;
   top: 0;
}
td {
   position: relative;
}

Mon seul indice est qu'il y a une autre valeur que je devrais céder à td qui serait la cause de travaux. Certains autres stackoverflow questions ont mentionné Firefox conduit mal avec cela, mais je n'ai pas été capable de trouver une réponse. J'ai essayé d'assigner à la fois en haut et à gauche les valeurs de zéro, mais FF ne cédera pas.

ce travail est en FF 12.0 pour moi. "Deux" se chevauchent "Trois", mais ses toujours tort, se référer à ma réponse
Chaque "deux" devraient se chevaucher son propre "trois" je ne suis pas sûr que si vous étiez juste de voir les deux "deux" recouvrent les trois mêmes
Ce qui a été enregistré comme un bug il y a 14 ans! bugzilla.mozilla.org/show_bug.cgi?id=35168 Lire cet article utile davidwalsh.nom/table-cell-position absolue
Comme de firefox 32 positionnement absolu des éléments à l'intérieur des cellules de tableau semble bien fonctionner.

OriginalL'auteur EGHDK | 2012-06-13

  1. 12

    Changement de l'ID de classes et également de les afficher sous forme de blocs fixe:

    http://jsfiddle.net/GchWZ/

    Il est meilleur et plus "propre" de l'utilisateur intérieure de la div mais comme il est cité à partir de ce débordement de pile post: N'assistance de Firefox position: relative sur les éléments de la table?

    <td>
  <div style="position:relative">
      This will be positioned normally
      <div style="position:absolute; top:5px; left:5px;">
           This will be positioned at 5,5 relative to the cell
      </div>
  </div>
</td>
    Qui a travaillé! Super, maintenant, comment le saviez-vous? Est-ce quelque chose que je devrais lire (je ne sais pas vraiment à la bonne utilisation de display) ou est-ce quelque chose qui est juste un "fix" pour Firefox ou faut-il une procédure d'exploitation standard chaque fois que le faire dans l'avenir?
    Je me souviens avoir lu il y a longtemps quelque chose à propos de la façon dont firefox poignées de td différemment. Je vais essayer de retrouver l'article.
    Ouais, display:block était une solution temporaire, car maintenant que j'ai essayé de développer un peu plus et nécessaire display:block-inline il a également battu dans Firefox, mais toujours travaillé dans tous les autres navigateur.
    En fait, maintenant diplay:inline-block travaillé. Je vais sélectionner votre réponse, car il fallait en ligne une ligne supplémentaire de CSS et pas beaucoup plus de html.

    OriginalL'auteur Phu

  2. 1

    Vous utilisez des Id

    Id sont uniques. Classes d'utilisation si vous souhaitez réutiliser un style de cession.

    Mis à jour mon JS fiddle voir ci-dessus et ça ne fonctionne toujours pas

    OriginalL'auteur Brandt Solovij

  3. 1

    Le problème vient de la façon dont FF rend tables. Si vous définissez votre TDs à display:inline-block; il devrait s'afficher correctement.

    OriginalL'auteur hradac

  4. 1

    Essayez ceci:

    <tr>
    <td>
        <div id="wrapper">
            <div id="three">Three</div>
            <div id="two">Two</div>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div id="wrapper">
            <div id="three">Three</div>
            <div id="two">Two</div>
        </div>
    </td>
</tr>

    et pour le css:

    #two {
    position: absolute;
    top: 0px;
}

#wrapper {
    position: relative;
}

    OriginalL'auteur ppsreejith

  5. 0

    Côté de la double ID problème signalé par Brandt, de l'attribution le positionnement de cellules de tableau est douteux, au mieux, - je suis surpris qu'il fonctionne dans tous les navigateurs. Si vous devez utiliser un tableau, envelopper les éléments que vous souhaitez positionner dans un div et d'attribuer le wrapper div position: relative:

    <table>
    <tr>
        <td>
        <div class="wrapper">
            <div id="three">Three</div>
            <div id="two">Two</div>
        </div>
        </td>
    <tr>
</table>

    CSS

    #two {
   position: absolute;
   top: 0;
}
.wrapper {
   position: relative;
}

    OriginalL'auteur steveax

  6. 0

    Dans le cas où vous souhaitez positionner les trucs en haut et fond d'une cellule, également dans Firefox, j'ai fait le travail à faire le mélange suivant des CSS et (malheureusement) de jQuery.

    1. Utiliser un wrapper div (div.intérieure) à l'intérieur de votre td qui a une position=relatif style dans le td. À l'intérieur de l'emballage, j'ai ajouté 2 divs qui sont positionnés sur le haut et le bas de la cellule.
      La CSS de Positionnement Absolu dans les cellules d'un tableau ne fonctionne pas sous Firefox

    2. Positionnement en haut (classe=intervalle de démarrage) est gratuit, via la CSS de positionnement.

    3. Positionnement de la div.intervalle de fin en bas se fait via un script, qui ajoute le style indiqué dans l'image. Avec la variable de la td-heights et le wrapper div 0-hauteur par défaut, vous avez besoin d'un moyen de dire à l'élément de savoir jusqu'où il doit aller vers le bas. Le script est comme suit:

              $("table .inner .interval-end").each(function () {
            $(this).css({top: ($(this).parent().parent().height() - 10) + "px"})
        }).show()
    4. J'ai d'abord fait de la div.l'intervalle de la fin de l'invisible, de définir le 'top' style, et puis rendue visible via jQuery show().

    Espère que cela aide les gens à atteindre le même. Laissez-moi savoir si il y a de meilleures méthodes là-bas, spécialement si ces méthodes ne nécessitent pas de script. BTW: j'ai essayé le réglage de la hauteur du style de l'emballage de la div.intérieure, mais il mess avec le tableau de mise en page dans Firefox.

    OriginalL'auteur Cor

  7. -1

    Il existe des raisons légitimes pour utiliser CSS display: table de style. Il élimine les problèmes que display: block et display: inline-block n'abordent pas. Ces raisons occuper la totalité d'un chapitre d'un livre sur le style CSS donc je ne vais pas entrer dans les ici. Ce même livre décrit également le problème de positionnement à l'intérieur des points avec ce type d'affichage. CSS 2.1 spécifications simplement ne pas aborder la question et Mozilla a choisi de suivre un cours qui ignore les tentatives de créer un contexte de positionnement avec ces éléments. CSS-table de positionnement est bien établi, de la mature, de la méthodologie, et de ne pas "douteux" - il faut juste compréhension de ses limites comme tous les autres CSS de l'élément. Pour les mises en page liquides et d'autres dispositions lorsque la taille des éléments est variable ou inconnue il est indispensable pour l'espacement vertical et de positionnement.

    Une suggestion dans ce fil de discussion a été présenté - créer une div à l'intérieur de la "table-cell" élément en position: relative et l'utiliser pour le contexte de positionnement. L'autre méthode consiste à incorporer un autre CSS table à l'intérieur de la cellule et de l'utiliser pour la position des éléments dans une grille. La troisième méthode consiste à envelopper votre CSS table à l'intérieur d'un autre élément qui crée un contexte de positionnement.

    Je suis un peu en retard pour en revenir à cela, mais je trouve moi-même surpris par la baisse de vote. Pourquoi? J'ai donné assez de détails réponse sur ce sujet ici: stackoverflow.com/questions/8951993/... ..et a reçu une importante hausse de vote et de "Meilleure Réponse" pour ma réponse. J'utilise des règles CSS pour le menu horizontal de positionnement et comme une solution pour le problème de "Bâton de Pieds de page", sans recours à un absolu dimensions (Oh, Monsieur l'Utilisateur? Vous avez besoin pour faire de votre écran à l'être de CETTE taille pour à regarder à droite...) ou le JavaScript.

    OriginalL'auteur Richard Robertson