应用hasLayout时IE7换行文本的解决方法

Question

对于已知的IE7问题，当文本的容器应用了hasLayout时(在这种情况下，由于所需的高度)，文本不会环绕浮动元素，是否有解决方法？

例如：

<div style="width:200px;">
    <div style="float:right; width:50px; height:100px; background:#ff0;">&nbsp;</div>
    <div style="background:#0ff; height:400px;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. 
    </div>
</div>

Answer 1

使用以下过程：

• 为每行创建一个占位符元素
• float:left; clear:left; overflow:hidden;，为每个行创建一个通用高度，为每个占位符

创建一个特定宽度

下面是一个示例：

#holdit em {display:block; float:left; height:18px; overflow:hidden; clear:left;}
.a230 {width:230px;}
.a240 {width:240px;}
.a250 {width:250px;}
.a270 {width:270px;}
.a300 {width:300px;}
.a340 {width:340px;}
.a360 {width:360px;}
.a370 {width:370px;}
.a400 {width:400px;}
.a420 {width:420px;}
.a430 {width:430px;}
.a460 {width:460px;}
.a490 {width:490px;}
.a500 {width:500px;}
.a540 {width:540px;}
.a550 {width:550px;}

参考

• Stu Nicholls | CSSplay | Wrapping text around images
• Stu Nicholls | CSSplay | Tracking your images