IE6 nowrap e problema galleggiante

StackOverflow https://stackoverflow.com/questions/2086202

Domanda

Questo mi sta facendo impazzire ... 

<!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>

In ogni altro browser, il testo galleggia dopo la scatola blu. In IE6 però (un po 'prevedibile), il testo scende sotto la scatola blu.

... non riesco proprio a trovare una risposta a questo. Il testo non può avvolgere, da qui il nowrap.

- in modo casuale, aggiungendo questo rende la scatola blu scomparire completamente

È stato utile?

Soluzione 3

Ah ah, abbiamo trovato la risposta: Grazie a tutti coloro che hanno aiutato, e Rosie per questo

. 
<!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>

Altri suggerimenti

La ragione di questo comportamento è che .wrapper .text non ha un set di larghezza, e anche non fluttua. Di conseguenza, esso assumerà la larghezza 100%, come DIV fanno di default, e quando si utilizza il 100% della larghezza del suo contenitore, non può andare bene accanto alla casella di blu, ma apparirà immediatamente al di sotto di esso. Per risolvere questo problema, è necessario impostare una larghezza che è everything-16px, o è necessario impostare float: left al DIV .text.

La seconda soluzione è più conveniente in quanto non richiede l'impostazione larghezze fisse, ma lo fa richiedono di aggiungere un DIV compensazione come l'ultimo figlio di .wrapper, o il contenuto non sarebbe allocare qualsiasi spazio nel loro contenitore a tutti: 

<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>

Il tuo <div class="text"> ha bisogno di un ambiente di larghezza su di esso.

Un tentativo di soluzione (ma non convalidare e non è abbastanza):

Per 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>

Per 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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top