Unrappable float löscht in IE, aber rendert mit Bildlaufleisten in allen anderen Browsern

Auf einer Seite auf meiner Website habe ich eine Tabelle in der rechten Spalte, die zu breit ist und keine Bildlaufleisten zeigen, IE wickelt es unterhalb des Inhalts in der linken Spalte. Ich kann keine Lösung dafür finden, weil ich nicht weiß, wie ich beschreiben soll, was passiert.Unrappable float löscht in IE, aber rendert mit Bildlaufleisten in allen anderen Browsern

Hier ist der Code, den ich das Problem demonstrieren bin mit:

<style> 
    #col1 { float: left; width:189px; font-size:8pt;} 
    #col3 { width: auto; margin: 0 0 0 191px; } 
</style>    
<body>   
    <div id="col1"> 
      <div style="padding-top:30em;border:1px solid red">really tall</div> 
    </div> 
    <div id="col3">   
      <h1>title</h1> 
      <table border="1"> 
      <tr> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
      </tr> 
     </table> 
    </div> 
</body>

Und hier ist, wie es in IE macht:

In allen anderen Browsern, die Tabelle eines der knapp "zeigt Titel "und ich bekomme eine horizontale Bildlaufleiste. Das ist, was ich erwarten würde, aber aus irgendeinem Grund will IE den Inhalt in Spalte 1 löschen. Ich habe versucht, Breiten, Schwimmer, etc. anzuwenden, aber ich kann IE nicht dazu bringen, die Tabelle unter den Titel zu stellen, ohne den col1-Inhalt zu löschen.

Ich nehme an, es gibt einige IE hack für diese, aber was ist das?

Quelle

2010-11-19 Jody Powlette

hinzufügen zoom:1 auf die CSS von # col3, wird dies lösen (es ist bezogenes Problem hasLayout)

http://jsfiddle.net/fcalderan/ZPztF/

P. S. Es ist eine Art von Magie (cit Königin.) =)

http://reference.sitepoint.com/css/haslayout

Quelle

2010-11-19 16:52:54

Frage für meine eigene Erbauung ist das Setzen des Zooms hier, um die Eigenschaft "hasLayout" auf "true" zu setzen oder wird eine andere versteckte Einstellung in IE umgedreht? – Adrian

Ich habe das schon versucht und es hat keine Auswirkungen in IE6. @antonlavey - es wird nur verwendet, um hasLayout auf true zu triggern. –

Bestätigt, dass dies in IE7 funktioniert. Danke für die Aufklärung meder – Adrian

Können Sie eine Breite auf col3 festlegen? Wenn nicht, versuchen Sie, den Rahmen so einzustellen, dass er ein CSS- und kein HTML-Rahmen ist. Versuchen Sie auch border-collapse:collapse; auf dem Tisch. Wenn Sie eine Breite für Spalte 3 festlegen können, verwenden Sie auch overflow:hidden;. Sie können auch versuchen, inline-block auf beide statt Floats zu verwenden.

EDIT: Endlich bekam meine Lösung in IE6 arbeiten. Es erfordert Änderungen der Quellreihenfolge, aber Inhalt kann jetzt zuerst sein.

EDIT # 2: Meine Lösung arbeitet in Eigenarten IE6/IE7/IE8 und Standards IE6/IE7/IE8 sowie Fx, Chrome.

http://work.arounds.org/sandbox/67/run

Quelle

2010-11-19 16:29:56

ich nicht eine Breite auf col3 einstellen - es ist eine Flüssigkeit Layout und erweitert mit der Browser-Breite. Ich habe deine anderen Vorschläge ohne Glück versucht. –

Kann Downwoter den Grund dafür erklären? –

+1 für den Downvote, es ist eine vollkommen vernünftige Antwort –

Haben Sie versucht, Überlauf und fügte hinzu: auto; zum # col3 Stil?

Quelle

2010-11-19 16:32:57

Ja, hat keine Wirkung. –

Unrappable float löscht in IE, aber rendert mit Bildlaufleisten in allen anderen Browsern

Antwort

Verwandte Themen