1

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

http://jsfiddle.net/UEAd5/5/

<!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 中，当蓝色将红色推向右侧时，它也会强制其 y 偏移量与绿色一起清除。这是 IE9 中的标准行为还是错误，是否有任何解决方法可以保留 DIV 的顺序？

约翰

4

1 回答 1

0

不幸的是，我没有针对您当前方法的解决方案，但是您可以将浮动更改为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

于 2013-07-08T22:16:10.457 回答