IE schwimmt auf der rechten Seite - sorry, ich kann einfach nicht die Lösungen verstehen verfügbar

Ich habe eine feste Breite Elternteil div, in dem ich rechts ein Bild mit den Tags am Floating:IE schwimmt auf der rechten Seite - sorry, ich kann einfach nicht die Lösungen verstehen verfügbar

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

mit der Erwartung, dass Der Text wird um das Bild gewickelt.

Leider schwebt IE7 das Bild außerhalb der RHS-Grenze des Eltern-Div (siehe http://horticulture127.massey.ac.nz/ie7view.png), während FF und Safari den Float und den umschlossenen Text innerhalb der Eltern-Div-Grenze anzeigen (die schwarzen vertikalen Linien sind die LHS/RHS-Grenzen der Eltern div.

Wie kann ich diese CSS Fehler beheben? Es gibt einfach so viele Informationen verfügbar über IE6/7 Probleme mit der rechten schwimmt, dass ich total überwältigt bin und kann die Lösung nicht sehen.

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

(imgposr ist kein CSS-Element - es ist ein Selektor für einige JQuery)

Quelle

2009-06-06 TomBaine

Hat das Elternteil eine height -Eigenschaft? Was ist es? –

Ich hatte in der Vergangenheit Cross-Browser-Probleme, wenn ich float und clear im selben Element definierte. Versuchen Sie, ein 'div' vor dem' .imgr' Element mit dem klaren dort hinzuzufügen und entfernen Sie es aus '.imgr' css und sehen Sie – Rodolfo

-1

könnten Sie versuchen, die folgenden:

.imgr { 
    overflow:auto; 
}

Quelle

2009-06-06 13:16:59 jao

Das wird eine Bildlaufleiste hinzufügen, nicht was der Fragesteller will. –

Es wird keine Bildlaufleiste hinzugefügt, wenn dies nicht erforderlich ist. Ich habe den gleichen Ansatz verwendet. Eine andere Möglichkeit, dies zu beheben, besteht darin, dem übergeordneten Element eine Gleitkommazahl hinzuzufügen. – jao

Es ist wie etwas scheint die Breite Ihres ‚buggybox‘ aus irgendeinem Grund 1px setzt -, dass der einzige Weg ist, ich war in der Lage zu bekommen, ein Ergebnis, das, was ähnelt du beschreibst.

Wenn überhaupt möglich, könnten Sie versuchen, ein vollständigeres Bit des Codes zu veröffentlichen, der das Problem darin hat? Versuchen Sie, den Code so kurz wie möglich zu machen und alles zu entfernen, was nicht relevant ist. Ich habe den folgenden Code Setup, was ich denke, was Sie wollen.

Wenn ich dem .imgr div eine Breite von 1 px hinzufüge, erhalte ich das gleiche Ergebnis wie in dem von Ihnen gelieferten Bild (sowohl in Firefox als auch in IE), weshalb ich vermute, dass das Ihr Problem ist .

<!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>

Hoffe, das hilft!

Quelle

2009-06-06 21:20:59 ylebre

Sie müssen position:relative; zum übergeordneten Element hinzufügen.

Quelle

2009-10-13 22:05:33

IE schwimmt auf der rechten Seite - sorry, ich kann einfach nicht die Lösungen verstehen verfügbar

Antwort

Verwandte Themen