-2

IE9 で奇妙な問題が発生し、追跡と再現に多くの時間を費やしました。

したがって、次のマークアップがあります。

<div class="container">
    <div class="movable">
        <div class="stuff">Stuff</div>
        <div class="stuff special">Stuff Special</div>
        <div class="stuff">Stuff</div>
        <div class="stuff">Stuff</div>
    </div>
</div>

これにより、次のような結果になります。

いじる前の箱

.stuff黄色のボックスを上に (コンテナの外に) 移動し、要素をクリアしたいと考えています。少なくとも 1 つ .stuffの要素をフロートさせたいので、 を選択して、次の.specialようにします。

.movable { margin-top: -70px; }
.stuff { clear: both; }
.special { float: left; }

左側は Chrome と Firefox で得られた結果、右側は IE9 です。

左: Chrome、右: IE9

ご覧のとおり、IE9 は負の値を適用するとどういうわけか動かなくmargin-topなり、右または左floatをclear: both;同時に適用する要素で常に動かなくなります。これら 2 つのプロパティの組み合わせが必要です。そのうちの 1 つだけでは、この動作はトリガーされません。

問題を示し、再生できる jsFiddle

この問題は、非常に大きなアプリケーションで発生しました。特定の理由により、top代わりに使用できませんmargin-top。配置すると、他のものが壊れます。

IE9でこれを正しく表示する方法を知っている人はいますか?

4

1 に答える 1

2

をクリアし.movable elementます。clearfix クラスを追加するなど、通常どのように行っているのかわかりません。そうでない場合は、overflow:hiddenたとえば追加してください。フローティングしても修正されますが、実際のページではうまくいかない場合があります。

.movable { margin-top: -70px; overflow:hidden; }

jsフィドル

于 2013-04-30T20:48:54.763 に答える