Question

我有一个有趣的问题需要一段时间来复制IE9，但它涉及浮点数和内联块元素。由于移动中所需的内容流，我尝试使用浮点数和内联块来获取元素的特定顺序。然而，它们相互奇怪地流淌在一起。我会顺从一个小提琴......

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Float and Inline-Block Lab</title>
    <style type="text/css">

    .green {
        float: left;
        width: 60%;
        height: 100px;
        background-color: #0ABC00;
    }

    .yellow {
        float: right;
        height: 50px;
        width: 40%;
        background-color: #ABC000;
    }

    .blue {
        float: left;
        width: 65%;
        height: 100px;
        background-color: #00ABC0;
    }

    .red {
        display: inline-block;
        width: 30%;
        height: 80px;
        background-color: #AB0000;
    }

    </style>
</head>
<body>
    <div class="green">(A)</div>
    <div class="yellow">(B)</div>
    <div class="blue">(C)</div>
    <div class="red">(D)</div>
</body>
</html>

在Firefox / Chrome甚至IE8中（虽然不是jsfiddle）它运行正常。红色落在黄色之下。但是，在IE9中，当Blue向右推红色时，它也会强制其y偏移量用它清除绿色。这是标准行为还是IE9中的错误，是否有可以保留DIV顺序的变通方法？

约翰

Answer 1

不幸的是，我没有针对您当前方法的解决方案，但您可以将浮动更改为display:inline-block，并将position:relative; top: -30px应用于块D，这在Firefox和IE中呈现相同的效果。此外，由于div现在变成了内联块，它们之间的空白变得很重要，所以我通过将font-size:0应用于正文来移除它们，font-size: 16px to body > div

jsfiddle：http://jsfiddle.net/UEAd5/6/ IE 8的jsfiddle：http://jsfiddle.net/UEAd5/6/show/light

IE9强制内联块元素清除浮动

1 个答案: