Floating-Elemente, die aus dem Container in IE7 und manchmal auch in WebKit-Browsern fallen

Ich habe folgenden CSS-Code und meine Floats fallen aus ihren Containern. Firefox hat dieses Problem nicht. Was könnte ein Grund für dieses Verhalten sein?Floating-Elemente, die aus dem Container in IE7 und manchmal auch in WebKit-Browsern fallen

<div class="container"> 
    <div class="leftmenu"> 
     ... some stuff here ... 
    </div> 
    <div class="rightmenu"> 
     <div style="float: right; text-align: right;"> 
      <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 1 </button> 
      <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 2 </button> 
      <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 3 </button> 
      <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 4 </button> 
     </div> 
    </div> 
</div>

Quelle

2009-09-29 newbie

Interessant. Es sollte auch in Firefox passieren. – ijw

Keine der angegebenen Antworten hilft. – newbie

Niemand scheint zu verstehen, was das Problem ist. Aus welchen Behältern fallen die Schwimmer? Ein paar der folgenden Lösungen werden das Problem beheben, dass 'rightmenu' kollabiert, aber entweder wenden Sie sie falsch an oder wir beantworten alle die falsche Frage. Haben Sie einen Link zu einer Live-Site? – Emily

Der Container, in Ihrem Fall "div.container", wird nicht in der Lage sein, die korrekte Höhe von sich selbst zu berechnen, sobald seine Kinder schweben. Wenn untergeordnete Blöcke vorhanden sind, die nicht schweben, verwendet der Container die Höhe des höchsten unter ihnen.

Ein Container mit seinen beiden untergeordneten Blöcken ist sowieso üblich. Es gibt bestimmte Möglichkeiten, dies zu beheben. Betrachten Sie die von QuirksMode zusammengefassten Ansätze am besten. http://www.quirksmode.org/css/clearing.html

Also, um Ihr Problem zu lösen, fügen Sie dies einfach in Ihre CSS-Datei.

div.container { overflow: auto; width: 100%; }

HINWEIS: Der Breitenwert kann einen beliebigen Wert haben. aber es ist verpflichtet, das HasLayout-Verhalten in IE [67]

auszulösen. Sie können eine zusätzliche div verwenden:

<div style="clear: both;"></div>

dies in div.container nach div.right hinzufügen.

Allerdings gibt es einen besseren Weg, dies zu tun. Fügen Sie eine .clearfix Utility-Klasse in Ihrem CSS:

.clearfix { 
    *zoom: 1; 
} 

.clearfix::before, 
.clearfix::after { 
    display: table; 
    content: ""; 
} 

.clearfix::after { 
    clear: both; 
}

hinzufügen clearfix die Klasse Attribut div.container.

Quelle

2009-09-29 08:41:29 nil

Den Container eine explizite Breite zu geben, war der Schlüssel für mich. Sehr hilfreiche Antwort, danke! – AndreiM

Die Breite schien es auch für mich zu tun! Elegante Antwort @nil – BizNuge

Setzen Sie diesen Code in dem Boden des #rightmenu div:

<span style="clear:both;"></span>

Der klare beide Stil beendet den Schwimmer sowohl von den linken und rechtser Seite. Wenn Sie das Löschelement unmittelbar nach dem Floating-Element freigeben, wird das Auslaufen des Floats verhindert, indem der Float-Effekt innerhalb des übergeordneten Elements des Containers beendet wird.

Quelle

2009-09-29 08:30:17

In einigen seltenen Fällen die

<div style="clear:both;"></div>

nicht, weil in einem solchen Fall div verwenden Sie die Standard line-height und Standard-Schriftgröße

diese Klasse in CSS

.clear { clear: both; font-size: 0px; line-height: 0px; height: 0px; overflow:hidden; }

Put arbeiten und verwenden Sie es in Code

<div class="leftmenu"> 
... some stuff here ... 
</div> 
<div class="rightmenu"> 
... some stuff here ... 
</div> 
<div class="clear"></div>

Quelle

2009-09-29 14:27:34

Das div rightmenu hat keine Höhe, da es nur floatierte Elemente enthält, die selbst keine Höhe haben.

der Schwimmer

<div class="rightmenu" style="overflow:hidden;zoom:1;background-color:#ccc;">

Die overflow:hidden löscht den Schwimmer für Firefox, Safari und Chrome verwenden zu löschen. Die zoom:1 ruft hasLayout für ie6/ie7 auf. Die background-color:#ccc ist nur so, dass Sie sehen können, dass das Div die Floats enthält.

Quelle

2009-10-03 11:33:07 Emily

Es funktioniert nicht ... – newbie

Ohne zu wissen, was die "leftmenu" und "rightmenu" -Klassen tun, ist es schwierig, Ihr genaues Problem herauszufinden, aber versuchen, overflow: hidden; zu einem Element hinzuzufügen ist nicht floated, aber HAS floatted children. Beispiel: div.rightmenu im Beispiel und andere Regeln in Ihrem CSS.

Quelle

2009-10-08 03:51:35 Stephen

Dies funktioniert:

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<body> 
<div class="container"> 
    <div class="leftmenu"> 
     ... some stuff here ... 
    </div> 
    <div class="rightmenu" style="padding-bottom: 5px !ie; border: 1px solid black;"> 
     <div style="float: right; text-align: right;"> 
       <button style="display: inline-block;" class="ui-state-disabled ui-state-default ui-corner-all"> Button 1 </button> 
       <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 2 </button> 
       <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 3 </button> 
       <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 4 </button> 
     </div> 
     <br style="clear: both;" /> 
    </div> 
</div> 
</body> 
</html>

Quelle

2009-10-09 21:41:27

.container { 
    overflow: auto; 
}

funktioniert der Trick.

Quelle

2015-07-02 09:13:19 Daphen

Floating-Elemente, die aus dem Container in IE7 und manchmal auch in WebKit-Browsern fallen

Antwort

Verwandte Themen