internet-explorer - 文本不换行到 IE 6 和 7 中向右浮动的元素

Question

我有下面的 HTML 和 CSS，我试图让 .metadata 向右浮动，并让文本环绕它。它在 Firefox 和当前版本的 IE 上运行良好，但在 IE6 和 7 中，文本不换行。元数据框向右浮动，但无论元数据框的高度是多少，它也会将文本向下推这么多，文本将跨越#container 的宽度。

在当前浏览器中，文本环绕 .metadata 框。

#container { width: 960px; margin:0 auto;}
.metadata { float: right; width: 500px; }

<div id="container">
    <div class="metadata">
        <div class="metadataRow">
           <div class="metadataLeft">Name: </div>
           <div class="metadataRight">Lorem ipsum</div>
        </div>
    </div>

    <p class="text">Lorem ipsum </p>
</div>