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和浮動問題

回答

相關問題