IE6 nowrap 和浮动问题答案

【问题标题】：IE6 nowrap and floating problemIE6 nowrap 和浮动问题
【发布时间】：2010-01-18 13:14:09
【问题描述】：

这让我发疯了......

<!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 中（有点可预见），文本会低于蓝色框。

...我只是找不到答案。文本不能换行，因此没有换行。

-- 随机添加这个会使蓝框完全消失

【问题讨论】：

嘿，如果它不能包装，你为什么称它为包装器？ :O
总有一个！ :o) 我会改变它的名字...
请问我在什么方面被否决了？
@IP：我怀疑这个标题。 +1 回到 0。
我也删除了攻击性标签。善良而聪明。

标签： html internet-explorer-6 css-float nowrap

【解决方案1】：

这种行为的原因是.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>

【讨论】：

恐怕这些都不能解决IE6中的问题。就像胶水一样粘在蓝色盒子的底部……

【解决方案2】：

您的<div class="text"> 需要对其进行宽度设置。

【讨论】：

恐怕这在 IE6 中也不起作用。见大卫的回答。
这取决于no-wrap。 IE6 实际上是在做它被告知的事情，而不是包装内容。你不能同时拥有它。

【解决方案3】：

啊哈，我们找到了答案：感谢所有提供帮助的人，感谢 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>

【讨论】：

【解决方案4】：

尝试解决方案（但它不会验证且不美观）：

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

【讨论】：

谢谢。我想我也试过这个，它不喜欢它的想法。缩放似乎使它像一个显示块，它又掉了下来