html - ie7标准模式下的 float 问题

Question

我试图让底部的 div 向右浮动并出现在其父元素的底部。此标记适用于我的所有浏览器，除非我将 IE9 置于浏览器模式:IE9 和文档模式 IE7 标准(这是我需要使用的标准。)

由于某些原因，当我需要它像在 FF 或 Chrome 中那样环绕文本时，div 中测试周围的灰色边框一直延伸到父 div 的左侧。顺便说一句，我讨厌 IE7 这个垃圾。标记是完全合乎逻辑的，应该可以工作，但 IE7 只是一个 SCSS 。

 <div style="width: 200px;">
    <div style=" height: 400px; border: 1px solid #000000;">
    </div>
    <div style="border: 1px solid #c0c0c0; position: relative; height:15px; bottom: 19px; left: -2px; float:right;">
        <div style="height: 15px; float: right;">
            Text in div</div>
    </div>
</div>

Answer 1

你可以切换到使用position: relative/position: absolute:

http://jsfiddle.net/5fdcV/

<div style="width: 200px; position: relative">
    <div style=" height: 400px; border: 1px solid #000000;">
    </div>
    <div style="border: 1px solid #c0c0c0; position: absolute; height:15px; bottom: 2px; right: 2px;">
        <div style="height: 15px;">
            Text in div</div>
    </div>
</div>