nowrap IE6 y flotando problema

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

Pregunta

Esto me está volviendo loco ... 

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

En cualquier otro navegador, el texto flota después de la caja azul. En IE6 sin embargo (de alguna manera predecible), el texto cae por debajo de la caja azul.

... No puedo encontrar una respuesta a esto. El texto no puede envolver, de ahí el nowrap.

- Al azar, añadiendo esto hace que el cuadro azul desaparece por completo

¿Fue útil?

Solución 3

Ah, ja, hemos encontrado la respuesta: ¡Gracias a todos los que ayudaron, y Rosie para este

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

Otros consejos

La razón de este comportamiento es que .wrapper .text no tiene un conjunto de anchura, y también no flota. Como resultado, se asumirá 100% de ancho, como DIVs hacen por defecto, y cuando se utiliza el 100% de la anchura de su contenedor, no puede caber al lado de la caja azul, pero se mostrará inmediatamente debajo de ella. Para solucionar este problema, es necesario establecer un ancho que es everything-16px, o es necesario establecer float: left a la DIV .text.

Esta última solución es más conveniente, ya que no requiere el establecimiento de anchos fijos, pero sí requiere que añada un DIV claro como el último hijo de .wrapper, o el contenido no asignaría ningún espacio en su envase en absoluto: 

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

su <div class="text"> necesita un ajuste de ancho en él.

Un intento de solución (pero no va a validar y no es bonito):

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

Para no 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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top