in IE6, IE7 et FF2 Le tel que je comprends Sortie attendue (IE8, FF3 +, Chrome 2+, Safari 4, Opera 9 +): Exigences: > update : J'ai reproduit le comportement comme exemple "monde réel" à l'aide de la boîte de dialogue JQuery. Les caractéristiques sont les mêmes: le voir ici . Encore une fois, IE6, IE7 et FF2 sont les seuls navigateurs problématiques. Ceci reproduit les conditions de mon application. J'ai essayé de faire bouillir le problème à ce que vous voyez au-dessus de cette mise à jour, mais j'ai le sentiment que les gens pourraient utiliser un exemple du monde réel où mes besoins ont du sens. J'espère que j'ai fait cela. .outer ci-dessous s'étend sur le bord droit du document. Voici un cas de test complet: Position: absolu , l'extérieur doit être retiré de l'écoulement du document et (sans largeur spécifiée ) Devrait-il occuper la quantité minimale d'espace nécessaire pour afficher son contenu. Toutefois Float: Droit sur n'importe quel enfant cassons cela. 
Sortie réelle (IE6, IE7, FF2): 
.ouvert ne peut pas avoir de largeur définir (IT> doit être laissé comme "auto" )
.outer doit rester absolument positionné
.floater doit rester flotté sur le droit
largeur = "auto"
10 Réponses :
Vous avez besoin de cela pour l'arrêter de déborder du bord de la page:
body {margin:0;padding:0}
Oui, je me fiche de déborder la page. Je me soucie seulement de pas étirement de l'élément absolument positionné.
Est-ce absolument nécessaire pour
@James: Oui, le .floater être float: droite ? Voulez-vous mettre du contenu sur le côté gauche de celui-ci? Je demande seulement, car changez-le à Float: Gauche corrige tout, et tout autre Les balises que vous devez être à gauche peuvent également être flottés à gauche ..
.floater doit être float: droite . C'est à peu près le creux du problème.
Float doit avoir une largeur dans ce cas et d'un autre point de vue, vous devez avoir le top: 0; gauche: 0; Pour l'élément positionné, ils ne devraient pas être tenus comme ça. Remarque: Ceci est la logique uniquement pour la conception si vous ne voulez pas le code, veuillez demander :)
Bon appel à une largeur pour le flotteur. Cependant, cela ne fait aucune différence (le parent reste toujours).
.outer {Overflow: caché; Clear: Droite; Position: absolu; frontière: 1px rouge solide; }
.outer .floater {flotteur: droite; }
Lorem ipsum
C'est vraiment simple, vous devez seulement définir les propriétés et effacer sur tous les objets qui ont flotté des enfants. Si le parent est également flotté, il suffit de définir Votre objet à flotter. Si vous avez des questions, il suffit de demander! Cordialement & GL. ;)
Avez-vous essayé cet échantillon vous-même et cela a fonctionné? Parce que j'ai ajouté débordement: caché; Effacer: droite; à .outer et le résultat est identique: le flotteur fait toujours que le parent s'étire complètement.
Si vous changez float: droite à Effacer: droite , vous obtiendrez la sortie demandée dans votre exemple, mais cela ne fonctionnera pas comme prévu si vous avez du contenu en dehors de la div.
La spécification CSS2 a quelques informations sur la manière dont un agent d'utilisateur "devrait" calculer la largeur, mais la réalité n'est pas la spécification: http://www.w3.org/tr/css2/visdet.html#Computing_widths_and_margins .
Je recommande vraiment d'aller avec un stricte DOCTYPE au lieu de transition un, http://www.w3.org/qa/2002/04/valid-dtd-list.html#dtd . < / p>
Sans spécifier une marge pour votre DIV .Le Div, l'agent utilisateur déterminera la largeur à l'aide de Pourquoi voulez-vous pas spécifier une largeur de la div parent?
Si vous le pouvez, spécifiez une largeur pour le parent div, même si c'est Cela peut être trivial, mais vous devriez être capable de raccourcir la déclaration .leur .floater à juste .floater.
Si vous avez besoin de l'effet "rétractable" autour du flotteur intérieur et devez maintenir la droite à flotteur, puis ajoutez largeur: auto , qui semble également varie en fonction de l'agent utilisateur.
largeur: 100% . Vous voudrez peut-être aussi placer * {marge: 0; rembourrage: 0; } dans la feuille de style pour éviter des différences d'agent utilisateur dans ces attributs, en particulier si vous spécifiez une largeur de 100% pour .outer.
direction: rtl; à la classe .floater; sinon vous devriez être en mesure d'utiliser flotteur gauche;
Je ne veux pas spécifier une largeur pour le parent div parce que je veux que ce soit élastique (c'est-à-dire étirer / rétrécir selon son contenu). Vous touchez cela avec votre commentaire «rétrécissant à l'ajustement». Je vais regarder vos autres suggestions et rapportera.
Peut-être un peu plus d'informations sur la conception "totale" que vous recherchez avec un contenu "maquette" pourrait nous aider à trouver quelque chose ... ATM, il n'y a vraiment pas besoin de le .outer Div, débarrasser de la classe. Extérieur et le .outer .floater Référence et le rendre juste .floater et le .Floater Div flotteront à droite avec l'effet «Rétrécissement à l'ajustement» que vous recherchez.
@DAN_NL: J'ai ajouté un exemple "Total Design" à la question. Les exigences sont là pour une raison.
Hey Roatin, j'ai pensé qu'il devait y avoir une exigence;) Il y a beaucoup de choses dans cette petite boîte de dialogue ... Si vous commencez le lien JQueryUI CSS et supprimez la déclaration de la classe .Floater, il semble que vous ajustez l'auto 'Re cherche. Lorsque vous remettez le problème de JQuery CSS, le problème de l'ajustement automatique revient donc il y a probablement un flotteur: juste dans cette feuille de style (n'a pas eu le temps de regarder cela). Devez-vous avoir le .floater {float: droite; } Déclaration?
@DAN_NL: Merci de la vérifier. Re: Vos commentaires: Si vous vous débarrassez de la liaison CSS, le conteneur n'est pas Position: absolu plus. Ceci rompre l'exigence n ° 2 (comme de côté: il n'y a pas de float: droite dans la feuille de style JQuery. Plutôt J'ai obtenu cela pour mon .floater < / Code> Déclaration). Deuxièmement, si vous vous débarrassez de la flotteur, j'ai une exigence cassée n ° 3.
ok .. J'essayais de reculer et de me concentrer sur la conception et la fonctionnalité de la boîte de dialogue que j'ai vue sur la page de test et commençait à la casser de manière à ce qu'il apparaisse de la même manière dans FF3 et IE6. L'étape suivante consistait à examiner les classes JQueryui afin de ne pas "interférer" avec la conception, mais elle ressemble aux exigences de style que vous avez plus difficiles ... Si vous pouvez abandonner certains d'entre eux qui peut vous donner une solution. En tout cas, bonne chance.
Ouais pour des éléments positionnés absolus, Les tables sont vraiment le seul bon moyen d'obtenir une largeur élastique d'une mode croisée. Une seule table isolée est tout aussi bonne qu'un div aussi longtemps que vous vous souviendrez du CellsCaçage = 0 code>. P> <table cellspacing=0 cellpadding=0 style="position:absolute;top:0;right:0">
<tr><td>Lorem ipsum</td></tr>
</table>
Je sais qu'une table fonctionnera. Les tables travaillent toujours;) Les tables sont le miaou du chat. J'aime les tables. Cependant, dans ce cas, je préférerais préférez-le résoudre ce problème dans CSS seul. Le balisage existe dans trop d'endroits dans le codeBase pour qu'il soit pratique pour le réparer dans le HTML. Merci pour votre suggestion, c'est peut-être la seule solution de navigateur.
Au risque d'apparaître un peu trop zélé, "les tables sont vraiment le seul bon moyen d'obtenir une largeur élastique d'une mode cross-navigateur." n'est pas correcte. Je comprends pourquoi tant de gens aiment les tables (c'est un piratage facile), mais ils sont destinés à afficher des données tabulaires. Rien d'autre.
S'il vous plaît élaborer ... Comment obtenez-vous des éléments de blocs pour correspondre à leur contenu sans une table? Et pourquoi pensez-vous que les tables ne sont que pour les données tabulaires?
@darkporter: L'approche acceptée d'un élément de bloc Obtenir son contenu (c'est-à-dire une largeur de fluide) tout en restant dans le flux du document consiste à flotter de l'élément (par exemple, "gauche" ). Si restant dans le flux du document n'est pas important, Position: absolu fonctionne parfaitement, sauf si vous flottez un enfant comme je l'ai fait! . @CODEINTHOEHOE: Dans ce cas, une table présente les propriétés précises comme une DIV absolument positionnée, mais pas souffre de la part de la propblème décrite. Visser les "tables sont conçues pour les arguments de données tabulaires". C'est vieux. C'est fait. Les tables sont les SH - .
Quelques antécédents: la spécification W3C d'origine (à partir de 1994 ou chaque fois) Tableaux prévus pour les données. Ensuite, les gens avaient besoin de «mise en page» pour leurs sites de commerce électronique flashy Whiz-bang, afin que des tables ont évolué à cette fin. Ensuite, vers 2002, le modèle de boîte de CSS est devenu un modèle de mise en page viable. Les deux modèles (la disposition de la table et le modèle de boîte) avaient des pouvoirs que l'autre n'avait pas, donc les deux coexister jusqu'à ce jour. Ne vous inquiétez pas trop sur le "Spec", il y a de donner et de prendre. L'utilisation de facto se nourrit de la spécification. @CODEINTHOEHOE est juste en ce sens, le modèle de boîte est le modèle "préféré" des deux.
Votre .outer Div est vide, nous obtenons donc différents résultats. Dès que vous y ajoutez du contenu, au moins dans mon test, il semble fonctionner exactement de la même manière (mon test était chrome 3.0 comme le «travaillant comme prévu», et IE7 comme le cassé).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body { margin: 0; }
#outer { position: absolute; border:1px solid red; }
#wrapper { position: relative; }
#floater { position: absolute; right:0; border: 1px blue solid; }
</style>
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="floater">Lorem ipsumX</div>
</div>
Lorem ipsum dolor sit amet consequetur elitipsum dolor sit amet consequetur elit
</div>
</body>
Merci d'avoir regarder ceci. Résultats: 1) Votre premier exemple ne fait aucune différence: (comme on m'y attendait, le code de production a beaucoup de contenu après le flotteur, mais présente toujours le même étirement). 2) Votre deuxième exemple (introduisant un "wrapper relatif") ne fait aucune différence :(. La raison pour laquelle il fonctionne est parce que vous avez contourné mon exigence que floater reste flotté sur le droit
excuses pour la réponse négative, mais je ne pense pas qu'il y ait un moyen de contourner cela. La mise en œuvre du CSS pour les plus anciens navigateurs est tout simplement incorrecte lorsqu'il s'agit du cas que vous avez décrit, et je ne crois pas qu'il y ait un moyen de pirater cela via d'autres propriétés CSS dans les contraintes que vous nous avez données. En tant que solution limitée, vous pouvez en théorie définir un Je sais que ce n'est pas ce que vous voulez entendre, mais je pense que vous allez devoir mordre la balle et changer le balancement ou détendre vos besoins de style (par exemple, abandonner le flotteur). max-largeur sur l'extérieur de l'extérieur pour limiter le degré à lequel il s'étire ... mais malheureusement max-largeur n'est pas soutenu dans tous les "anciens" navigateurs mentionnés quand même.
Je suis d'accord avec ça. J'ai regardé cela et je l'ai examiné pendant les deux dernières semaines, car c'est un si bon problème, mais je ne pense pas qu'il y ait une solution de contournement sur la façon dont IE6, IE7 et Firefox 2 gère une divitation divisée à l'intérieur d'un divisé absolument positionné sans set de largeur. Si c'était moi, je le laisserais comme pour les navigateurs qui fonctionnent, puis mettront un piratage pour max-largeur uniquement sur les navigateurs qui ne le gèrent pas et n'appellent cela par jour.
Depuis que je vois dans votre exemple de travail, vous utilisez d'abord JQuery, vous pouvez calculer la largeur du conteneur, avant de flotter le flotteur, comme: Mettre une largeur sur l'extérieur DIV le fait se comporter dans tous les autres navigateurs
Je n'ai pas IE6, IE7 ou FF2 à tester, alors je vais prendre un coup de poignard dans le noir sur celui-ci. Si ma mémoire me sert, vous allez vouloir Float: laissé sur .outer . Cela minimisera la largeur de .outer tout en maintenant les proportions de votre div .
Est-ce que l'extérieur a des coordonnées ou cela n'a-t-il pas d'importance?
@Dave: Oui, dans la pratique
.outer agauche ethaut défini. Cependant, il n'a aucune incidence sur le comportement (c'est-à-dire que le bogue est présent avec ou sans coordonnées).D'où viennent vos exigences? Sont-ils auto-imposés? Après quelques expériences, je pense que votre meilleur pari est de réécrire le HTML.
@IDRumGood: Les exigences sont auto-imposées, mais le balisage existe dans de nombreux endroits que je voudrais préférez pour résoudre ce problème en utilisant uniquement CSS. Cela dit, si vous avez une suggestion pour une modification du balisage qui satisfait toujours aux exigences que je serais reconnaissant de l'entendre.
Avez-vous un exemple de problème? Il semble que vous ayez décidé de ce que vous voulez que la solution soit - et que vous essayez maintenant de trouver un moyen de la mettre en œuvre. Peut-être qu'il est bon de prendre un pas en arrière dans une situation comme celle-ci et d'examiner le problème en premier?
@CODEINTHOEHOE: "Examinez le problème d'abord" ?? Quel diable pensez-vous que je faisais? Regardez la question à nouveau. Savez-vous combien de temps il a fallu pour réduire le bug / comportement à celui-ci un exemple simple? Quelque temps. Alors oui, j'ai examiné le problème.
@CODEINTHOEHOE: J'ai ajouté un exemple.