IE6 NOWRAP和浮动问题

这是推动我坚果...IE6 NOWRAP和浮动问题

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

在其他浏览器，文字的蓝色框后浮动。然而，在IE6中（有点可预测地），文本在蓝框下方。

...我只是找不到答案。文字无法包装，因此nowrap。

- 随机，加入这使得蓝盒子完全消失

来源

2010-01-18 Paul

嘿为什么你称它为包装，如果它无法包装？：O – 2010-01-18 13:16:24

总是有一个！：o）我会更改它的名字... – Paul 2010-01-18 13:17:05

我被拒绝了什么？ – Paul 2010-01-18 13:20:33

嗯哼，我们找到了答案：感谢所有帮助过我的人，并感谢Rosie。

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

来源

2010-01-18 15:36:52 Paul

这样做的原因行为是.wrapper .text没有设定宽度，并且它也不会浮动。因此，它将假设为100％宽度，因为DIV默认为宽度，并且当它使用其容器宽度的100％时，它不能放在蓝色框旁边，但会在其下方显示。要解决此问题，您需要设置一个宽度为everything-16px，或者您需要将float: left设置为.text DIV。

后一种解决方案更方便，因为它不需要设置固定的宽度，但它确实要求您添加一个清除DIV作为.wrapper的最后一个孩子，或者内容根本不会在其容器中分配任何空间：

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

来源

2010-01-18 13:21:08

恐怕这些都不能解决IE6中的问题。只是坚持像胶水一样的蓝色盒子的底部... – Paul 2010-01-18 13:23:50

您的<div class="text">需要在其上设置宽度。

来源

2010-01-18 13:23:14

恐怕这在IE6中也不起作用。见大卫的回答。 – Paul 2010-01-18 13:25:32

这是“无包装”。 IE6实际上正在做它所讲述的内容，而不是包装内容。你不能两面都有。 – 2010-01-18 14:15:54

在溶液的尝试（但它不会验证和不漂亮）：

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

对于非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>

来源

2010-01-18 14:24:40

谢谢。我想我也试过，它不喜欢它的想法。缩放似乎使它像一个显示块，它只是再次下降 – Paul 2010-01-18 15:38:12

IE6 NOWRAP和浮动问题

回答

相关问题