IE6 et nowrap problème flottant

Ça me rend dingue ...IE6 et nowrap problème flottant

<!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> 
    <title></title> 
    <style type="text/css"> 
     .cantWrapper { white-space: nowrap; } 
     .cantWrapper .floatedDiv { float: left; background-color: Blue; height: 16px; width: 16px;} 
     .cantWrapper .text { } 
    </style> 
</head> 
<body> 
    <div class="cantWrapper"> 
     <div class="floatedDiv"></div> 
     <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet felis quis erat blandit non interdum eros aliquet. Nullam libero risus, commodo sed lacinia vitae, aliquet at lacus. Ut mattis, leo vel dignissim ullamcorper, augue risus dapibus purus, in suscipit nisi ante sit amet massa. Curabitur in magna sed mauris auctor adipiscing vehicula a nisi. Nulla id massa sapien, eu viverra odio. Curabitur sollicitudin libero quis nunc molestie lacinia. In dictum sapien ut eros scelerisque adipiscing. Fusce feugiat adipiscing elit, commodo placerat lacus molestie in. Phasellus pharetra vestibulum aliquet. Sed tincidunt pulvinar mattis. Curabitur congue est placerat risus iaculis quis condimentum neque sodales. Vivamus in urna purus, in luctus velit. Sed mollis orci sed mauris ullamcorper vulputate. Nullam eget ante nibh, at sagittis lectus.</div> 
    </div> 
</body> 
</html>

Dans tous les autres navigateurs, le texte flotte après la boîte bleue. Dans IE6 cependant (de façon quelque peu prévisible), le texte tombe en dessous de la boîte bleue.

... Je ne trouve tout simplement pas de réponse à cette question. Le texte ne peut pas envelopper, d'où le nowrap.

- au hasard, l'ajout de ce fait la boîte bleue disparaît complètement

Source

2010-01-18 Paul

hey pourquoi l'appelez-vous wrapper s'il ne peut pas envelopper? : O –

Il y en a toujours un! : o) Je vais changer son nom ... – Paul

Qu'ai-je été rejeté sur s'il vous plaît? – Paul

Ah ha , nous avons trouvé la réponse: Merci à tous ceux qui ont aidé, et à Rosie pour cela.

<!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> 
    <title></title> 
    <style type="text/css"> 
     .cantWrapper { position: relative; width: 100%; clear: left; white-space: nowrap; } 
     .cantWrapper .floatedDiv { float: left; display: inline; background-color: Blue; height: 16px; width: 16px;} 
     .cantWrapper .text { position: absolute; top: 0; } 
    </style> 
</head> 
<body> 
    <div class="cantWrapper"> 
     <div class="floatedDiv"></div> 
     <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet felis quis erat blandit non interdum eros aliquet. Nullam libero risus, commodo sed lacinia vitae, aliquet at lacus. Ut mattis, leo vel dignissim ullamcorper, augue risus dapibus purus, in suscipit nisi ante sit amet massa. Curabitur in magna sed mauris auctor adipiscing vehicula a nisi. Nulla id massa sapien, eu viverra odio. Curabitur sollicitudin libero quis nunc molestie lacinia. In dictum sapien ut eros scelerisque adipiscing. Fusce feugiat adipiscing elit, commodo placerat lacus molestie in. Phasellus pharetra vestibulum aliquet. Sed tincidunt pulvinar mattis. Curabitur congue est placerat risus iaculis quis condimentum neque sodales. Vivamus in urna purus, in luctus velit. Sed mollis orci sed mauris ullamcorper vulputate. Nullam eget ante nibh, at sagittis lectus.</div> 
    </div> 
</body> 
</html>

Source

2010-01-18 15:36:52 Paul

La raison de ce comportement est que .wrapper .text n'a pas un ensemble de largeur, et il ne flotte pas aussi. Par conséquent, il prendra 100% de largeur, comme les DIVs le font par défaut, et lorsqu'il utilise 100% de la largeur de son conteneur, il ne peut pas s'adapter à la case bleue, mais s'affichera immédiatement en dessous. Pour corriger cela, vous devez définir une largeur qui est everything-16px, ou vous devez définir float: left à la DIV .text. Cette dernière solution est plus pratique car elle ne nécessite pas de définir des largeurs fixes, mais vous devez ajouter une DIV de suppression en tant que dernier enfant de .wrapper, ou le contenu n'alloue aucun espace dans leur conteneur. :

<div class="wrapper"> 
    <div class="floatedDiv"></div> 
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet felis quis erat blandit non interdum eros aliquet. Nullam libero risus, commodo sed lacinia vitae, aliquet at lacus. Ut mattis, leo vel dignissim ullamcorper, augue risus dapibus purus, in suscipit nisi ante sit amet massa. Curabitur in magna sed mauris auctor adipiscing vehicula a nisi. Nulla id massa sapien, eu viverra odio. Curabitur sollicitudin libero quis nunc molestie lacinia. In dictum sapien ut eros scelerisque adipiscing. Fusce feugiat adipiscing elit, commodo placerat lacus molestie in. Phasellus pharetra vestibulum aliquet. Sed tincidunt pulvinar mattis. Curabitur congue est placerat risus iaculis quis condimentum neque sodales. Vivamus in urna purus, in luctus velit. Sed mollis orci sed mauris ullamcorper vulputate. Nullam eget ante nibh, at sagittis lectus.</div> 

    <div style="clear: both;"></div> 
</div>

Source

2010-01-18 13:21:08

Je crains que ni l'un ni l'autre ne résolve le problème dans IE6. Il colle juste au fond de la boîte bleue comme de la colle ... – Paul

votre <div class="text"> nécessite un paramètre de largeur.

Source

2010-01-18 13:23:14

Je crains que cela ne marche pas non plus dans IE6. Voir la réponse de David. – Paul

C'est le 'no-wrap'. IE6 est en train de faire ce qu'on lui dit et de ne pas envelopper le contenu. Vous ne pouvez pas l'avoir dans les deux sens. –

Une tentative de solution (mais il ne validera pas et n'est pas assez):

Pour IE6:

<style type="text/css"> 
     .cantWrapper { white-space: nowrap; } 
     .cantWrapper .floatedDiv { display: inline; zoom: 1; background-color: Blue; height: 16px; width: 16px;} 
     .cantWrapper .text { display: inline; } 
    </style>

Pour non IE:

<style type="text/css"> 
     .cantWrapper { white-space: nowrap; } 
     .cantWrapper .floatedDiv { display: inline-block; background-color: Blue; height: 16px; width: 16px;} 
     .cantWrapper .text { display: inline; } 
    </style>

Source

2010-01-18 14:24:40

merci. Je pense que j'ai essayé ça aussi, ça n'a pas plu. Le zoom semble faire comme un bloc d'affichage et il tombe à nouveau – Paul

IE6 et nowrap problème flottant

Répondre

Questions connexes