Internet Explorer：オーバーフローとフロート

StackOverflow https://stackoverflow.com/questions/1641992

質問

div内にimgがあります。 imgを「float：right」に設定し、divを「overflow：hidden」に設定しました。 divはimgよりも狭いため、imgの左部分が切り取られて非表示になると予想されますが、これは実際にFirefoxの場合です。ただし、IEは「float：right」を認めることを拒否します。 imgのプロパティ。常にimgをdivの左側に固定し、imgの右側を切り取ります。この問題の回避策はありますか？それとも私は何か間違ったことをしていますか？


**背景情報

これを行う理由は、jqueryの「ブラインド」でimgを表示するためです。効果（左から右）、その後同様のブラインド効果で消えます（再び、左から右）。

jqueryのデフォルトのブラインド効果は、左から右への消失を処理しません。この理由は、特定のモード（非表示と表示）および特定の方向（左と右または上と下）の組み合わせで、divの左上位置をさらに移動する必要があるためだと推測しています。例を示してみましょう。ブラインド効果で画像を左から右に表示したいとします。これは簡単です。divオーバーフローを非表示に設定し、画像を左にフロートさせてから、divの幅を0から画像の幅に変更します。一方、ブラインド効果で画像を左から右に消したい場合は、画像を右にフロートするように設定し、divの幅を画像の幅から0に縮小しながら、画像の右端を固定するために、divの左上隅を右に移動します。

左上隅の動きを組み込むコードを作成しましたが、FFでは正常に動作しますが、IEでは失敗します。 IEはfloat：rightを尊重せず、代わりに画像を左に固定することを要求するため、jqueryの「スライド」の効果があります。 「ブラインド」の代わりにアニメーション。

役に立ちましたか？

解決

IE 7で次のことを試してください：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<div style="overflow: hidden; width: 150px; direction: rtl;">
   <img src="yourimage.png" style="float: right" />
</div>
</body>
</html>

方向：IE 7標準モードを使用するIE 8では、rtl styelが機能します。 IE 8標準を使用するIE 8は、方向スタイルを必要としません。

これで問題が解決する可能性があります。 divにある他のコンテンツで動作するかどうかはわかりませんが、画像で望む効果を達成できるようです。

他のヒント

最悪の場合：画像の左側に白いDIVをスライドさせますか？ただし、非常にクロスプラットフォームです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top