Position: Absolue Withing Position: Relatif dans Chrome

J'ai fait l'erreur cardinale de ne pas déboguer sur TOUS les navigateurs lors de la conception de mon site. Dans Firefox (3.6.10) et IE8 les éléments de formulaire s'affichent bien mais en chrome (10), seule la position: les éléments absolus s'affichent.Position: Absolue Withing Position: Relatif dans Chrome

J'ai une forme faite à partir d'une liste non ordonnée. Les éléments de la liste sont configurés avec la position: relative. il contient une étiquette flottante gauche, un champ flottant droit et, potentiellement, une position: widget absolu.

HTML:

<form><ul> 
    <li> 
     <label>Name</label> 
     <input type="text" /> 
     <a id="nameGenerator" class="widget"></a> 
    </li> 
</ul></form>

CSS:

form ul li{ 
    margin: 5px; 
    clear: both; 
    position:relative; 
} 
form label{ 
    float:left; 
    margin-top: 0px; 
    margin-bottom: 0px; 
} 
form input{ 
    float:right; 
    margin-top: 0px; 
    margin-bottom: 0px; 
} 
form .widget{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 99; 
}

je peux "réparer" en supprimant la position: relative, mais qui est inacceptable. Y a-t-il quelque chose que je puisse faire pour produire les résultats souhaités?

Source

2011-03-17 Bob Roberts

Et quels sont les résultats souhaités? Peut-être mis en place et exemple? – easwee

@Myles, il est inacceptable car il oblige tous les éléments de position absolue à coller en haut de l'écran, pas rester dans leur élément de liste respectifs. –

@Myles Gray - position: statique est le positionnement par défaut - pas relatif. Il a besoin que le li soit relatif puisque chacun doit être son propre parent au widget sinon il se positionne par rapport au corps et non à li. – easwee

Ajouter à votre css:

form ul li{ 
    overflow:auto; 
}

http://jsfiddle.net/cTTVs/1/

Source

2011-03-17 12:18:19

Qu'est-ce que dans le nom de .... Merci mais comment dans le nom de ciel cela a-t-il fonctionné? Ça a l'air bien maintenant, je ne comprends pas pourquoi. –

Parce que les éléments flottants et absolument positionnés rendent l'élément environnant vide des éléments qui s'écoulent naturellement. Seuls les éléments réguliers font l'étirement environnant pour s'adapter au contenu, c'est un "problème" connu (ou en réalité, un comportement normal) avec flottant. Une autre solution aurait été d'ajouter une div à l'intérieur de chaque élément de la liste avec un 'clear: both' sur le –

Eh bien merci, vous basculez indescriptible dur. J'avais peur de refaire toutes les 20 pages de mon application web ... qui sont entièrement constituées de formulaires. –

Il suffit d'ajouter overflow:hidden aux règles form ul li. Cela fonctionne better than overflow:auto when clearing floats dans de nombreuses situations où les barres de défilement peuvent apparaître dans l'élément (éventuellement comme vos «widgets»).

Mise à jour:

J'ai eu une pensée que si votre widget doit afficher une liste de choses comme une boîte à suggestions ou sélecteur de date, vous serez mieux ne pas en utilisant overflow des valeurs pour effacer vos flotteurs. Une alternative est the old clearfix hack qui peut être plus approprié. Check out this demo qui a un faux widget montrant les différentes solutions et comment un grand widget pourrait travailler avec eux.

Démo: jsfiddle.net/Marcel/ghaHz

Source

2011-03-17 12:21:56 Marcel

Avec la mise à jour, cette réponse est de loin meilleure que la mienne. +1 –

Ajouter overflow:visible et il résoudra votre problème.

Source

2012-12-13 09:15:23 Shreyas

Position: Absolue Withing Position: Relatif dans Chrome

Répondre

Questions connexes