2009-06-06 1 views
0

利用可能なソリューションを理解することはできません。それを期待してIEは右に浮かぶ - 申し訳ありませんが、私はちょうど私が私がタグを使用して、右の画像浮いていた内の固定幅親のdiv持っ

<div style="width: 200px;" class="buggybox imgr" id="g0"> 
    <img class="imgposr" src="../images/irrigation/hip4microwave2.png" alt="Microwave" width="200" height="133"> 
</div> 

をテキストがイメージの周りをラップします。

残念ながら、IE7は親divのRHS境界(http://horticulture127.massey.ac.nz/ie7view.png参照)外に浮動しますが、FFとSafariでは親divの境界内にfloatとラップされたテキストが表示されます(黒い垂直線は、親のdiv。

私は、このCSSの障害をどのように修正すればよい?私は完全に圧倒さだとソリューションを見ることができない権利山車とIE6/7の問題について可能なだけでそんなに情報があります。

.imgr{ 
    float: right; 
    margin: 4px 0 4px 10px; 
    padding: 4px; 
    clear: right; 
} 
* html .buggybox {height: 1%;} 

(imgposrはCSSアイテムではありません - それはいくつかのjqueryのセレクタです)

+0

親にheightプロパティがありますか?それは何ですか? –

+0

フロートとクリアを同じ要素で定義するとき、私はこれまでクロスブラウザーの問題を抱えていました。 '.imgr'要素の前に' div'を追加して、そこからクリアし、 '.imgr' cssから削除してください。 – Rodolfo

答えて

-1

次の操作を試みることができる:

.imgr { 
    overflow:auto; 
} 
+0

これは、スクロールバーを追加します。 –

+0

必要がなければスクロールバーを追加しません。私は同じアプローチを使用しました。これを修正する別の方法は、親要素に浮動小数点数を追加することです。 – jao

0

何かが何らかの理由で1pxのためにあなたの「buggybox」の幅を設定しているように思え - それは私が何に似ている結果を得ることができた唯一の方法でありますあなたは説明しています。

可能であれば、問題があるより完全なコードを投稿しようとしますか?無関係なものをすべて削除して、できるだけコードを短くしてください。私はあなたが欲しいと思う次のコード設定を持っています。

.imgr divに1 pxの幅を追加すると、(FirefoxとIEの両方で)提供した画像と同じ結果になります。そのため、問題がどこにあるのか疑わしいのです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style type="text/css"> 
#parent { 
    width: 600px; 
    border: 1px solid black; 
} 

.imgr{ 
    float: right;  
    margin: 4px 0 4px 10px;  
    padding: 4px;  
    clear: right; 
} 
</style> 
</head> 
<body> 
<div id="parent"> 
    <div class="buggybox imgr" id="g0"> 
     <img class="imgposr" src="../images/irrigation/hip4microwave2.png" alt="Microwave" width="200" height="133"> 
    </div> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec sapien libero, eget interdum lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi rutrum interdum dui ac ultrices. Donec pulvinar feugiat nibh, sit amet rhoncus sapien consectetur quis. In orci ante, bibendum sit amet euismod eu, tristique ac erat. Donec in enim nisl. Etiam vestibulum scelerisque purus, et fringilla nibh malesuada sit amet. Praesent magna mi, egestas quis commodo a, vulputate ut sem. Nullam auctor vulputate justo, vel pharetra lectus pulvinar eget. Curabitur dignissim lectus nec ligula rutrum et pellentesque metus auctor. Sed metus diam, aliquet non malesuada vitae, tincidunt sit amet augue. Aliquam luctus posuere eros, non adipiscing ante varius sed. 
</div> 
</body> 
</html> 

0

親要素にposition:relative;を追加する必要があります。

関連する問題