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に変更し、ブロック D に適用position:relative; top: -30pxすると、firefox と IE で同じようにレンダリングされます。また、div がインライン ブロックになっているため、それらの間の空白が重要になるためfont-size:0、body に適用してそれらを削除し、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 に答える