Dev Faq
7
votes

CSS Absolute Div à l'intérieur Parent relatif pour Firefox

J'essaie de positionner un div dans une table. Le parent a Position: relative pendant que mon DIV LAS Position: absolu . Je développe habituellement en chrome et ça marche bien là-bas, mais quand j'ouvre Firefox, mon Absolute Div ignore son parent et occupe toute la page.

Voici un exemple qui fonctionne en chrome mais pas dans Firefox: http://jsfiddle.net/pdfsh/

Des idées?

5 commentaires

Pertinent: CSS-Tricks.com/absolutely-position-Element -within-a-table-CE ll

à l'intérieur de toute balise de table ne passera pas dans le validateur W3, si vous vous souciez de cela.

CSS-tricks.com/absolute-Positioning-Isside-Relative-Position ing

MDR! Je voudrais juste mettre ça maintenant :)

@gustavohenke,

est complètement valide dans dans HTML 4 / XHTML 1 et HTML5, le modèle de contenu de permet à tous les éléments de bloc de toutes ces normes.

3 Réponses :

0
votes

J'ai corrigé ce problème en ajoutant ce qui suit à la table Table TD TD code> CSS: 

float: left;
width: 100%;

1 commentaires

Ces propriétés sont inutiles. Ils fonctionnent parce que float: gauche définit Affichage: Bloc . Simplement définir affichage: bloquer est adéquat.

11
votes

Vous devez modifier la valeur de #absolute S parent: xxx

3 commentaires

Vous êtes la réponse, c'est bien, mais comment ça marche pouvez-vous expliquer ....

Sûr. Par défaut, une touche DISPLAY EST CODE DE TABLE DE TABLE . Firefox ( à tort -Manks Ilya Streltsyn) traite des cellules de table différemment. Réglage Affichage: Bloc Indique Firefox pour ne plus traiter l'élément TD comme une cellule de table, mais le traite plutôt comme élément de niveau de bloc. Affichage: Inline-Block fonctionnerait aussi bien.

Définition de parent vers Affichage: Bloc a résolu mon problème similaire.

7
votes

C'était Le bug connu de Firefox (fixe depuis Firefox 31) . Avant de fixer, les travaux de contournement courants imbriquaient la DIV à l'intérieur de la cellule de table et la position de réglage: par rapport à celle-ci, ou modifiant l'affichage de la cellule elle-même pour afficher: Bloc (qui convertit la cellule en une boîte à blocs en forme de div la boîte de cellule de table anonyme). La deuxième approche semblait être applicable dans ce cas car la hauteur de la cellule est fixée.

0 commentaires

Articles qui pourrait vous intéresser :

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher
Changer la direction de défilement de la page Web sur la version mobile
Target first-child css styled-components