ie6 和 7 中的 float:left 和 margin-left 问题答案

【问题标题】：float:left and margin-left issue in ie6 and 7ie6 和 7 中的 float:left 和 margin-left 问题
【发布时间】：2017-03-05 04:38:14
【问题描述】：

请看我的 IE 问题图片：

当我将第一个<div> 浮动到左侧并将第二个<div> 设置为margin-left: 220px 时，它与FF 和IE8 配合得很好。然而在 IE6 和 7 中它根本不起作用。我的第二个<div> 折叠并位于第一个<div> 的最右下方。这是 HTML 标记：

<ol id="listingList">
    <li>
        <div class="media">
            .......
        </div>
        <div class="listingInfo">
            .......
        </div>
    </li>
</ol>

CSS 代码：

#listingList div.media {
    width: 200px;
    float: left;
    padding-right: 10px;
}

#listingList div.listingInfo {
    margin-left: 220px;
    width: 540px;
    color: #6A6A6C;
}

【问题讨论】：

标签： html css internet-explorer-7 internet-explorer-6

【解决方案1】：

listingList div.listingInfo {
float:left;
margin-left: 20px;
width:540px;
color:#6A6A6C;
}

【讨论】：

是的，但是当
不存在时，第二个 div 会转到左侧。我需要的是从第一个 div 220px 中准确设置第二个 div。感谢 cmets！
让我试试。我记得已经试过了。不确定！

【解决方案2】：

你可以通过一个小的修改来让它工作：

#listingList div.media {
    background-color: blue;
    width:200px;
    float:left;
    padding-right:10px;
    position: absolute;
}

#listingList div.listingInfo {
    background-color: aqua;
    margin-left: 220px;
    width:540px;
    color:#6A6A6C;
    position: absolute;
}

虽然您还必须纠正错字：

<did class="listingInfo">

应该是

<div class="listingInfo">

【讨论】：