Get IE6 Quirks-Modus position: absolute Rendering im Standardmodus

Question

Ich habe eine absolut positionierten Navigation auf meinem Menü, das auf der linken Seite des Feldes verwiesen wird *

#menu { 
    position: absolute; 
    display:inline-block; /* I can hasLayout? */ 
    top: 0; 
    left: 0; 
    width: 265px; 
    height: 100%; 
    background: #ffc; 
} 

html>body #menu { 
    height: auto; 
    min-height: 100%; 
} 

Es ist etwas sollte wie folgt aussehen:.

+-------------------------------+ 
| N |       | 
| | content content content | 
| A | content content content | 
| |       | 
| V |       | 
| |       | 
| |       | 
| |       | 
| |       | 
| |       | 
| |       | 
| |       | 
| |       | 
| |       | 
| |       | 
| |       | 
+-------------------------------+ 

Und in jedem Browser außer IE6, tut es. In IE6 Standards-Modus, sieht es mehr wie folgt aus:

+-------------------------------+ 
| N |       | 
| | content content content | 
| A | content content content | 
| |       | 
| V |       | 
| |       | 
|----+       | 
|        | 
|        | 
|        | 
|        | 
|        | 
|        | 
|        | 
|        | 
|        | 
+-------------------------------+ 

Hier wird es knifflig. In IE6 in Quirks-Modus, sieht es richtig aus (soweit diese Box betrifft; alles andere ist Müll).

Wie bekomme ich das richtige Verhalten von IE6, ohne den Mapping-Modus zu erzwingen?

* Ja, ich weiß, ich sollte Floats dafür verwenden, und nicht darauf achten, dass es das gesamte Dokument streckt. Aber es ist anscheinend heilig, dass der Hintergrund der Navigationsleiste den unteren Rand der Seite erreicht, und dass es kein gekacheltes background-image ist.

Answer 1

Hm, vielleicht Zwiebelhaut wird dein Freund hier sein.

Haftungsausschluss: Dies funktioniert nicht für ALLE Hintergründe, aber es funktioniert gut für Dinge, die tesselieren und ich oft auf diese für IE6-Kompatibilität zurückgreifen.

Verwenden Sie den Quirks-Modus nicht wie gewünscht, sondern legen Sie fest, dass der enthaltene Hintergrund dieselbe Farbe (oder dasselbe Muster) aufweist. Dies wird die Illusion geben, dass es sich tatsächlich bis ganz nach unten erstreckt, wo es in Wirklichkeit nicht so ist. Wenn ich zum Beispiel eine graue Navigationsleiste habe, würde ich 256px mal 1px (in diesem Fall) solides graues png (oder gif, nehme ich an) rendern und diesen als meinen Körperhintergrund mit der wiederholten y CSS-Parametersatz für den Körperhintergrund:

z

html { 
    background: url('path/to/my256by1pxgif.gif') repeat-y; 
} 

nicht fabelhaft, aber garantiert mit den Dingen zu arbeiten, sogar älter als IE6: P

Hier einige zusätzliche Ressourcen (für Schlagschatten, aber gleiche Idee) http://www.alistapart.com/articles/onionskin/ http://www.ploughdeep.com/onionskin/360.html

Viel Glück !

Answer 2

Zunächst ist es in Ordnung, dass (in Ihrem ursprünglichen Code, für alle Browser), wenn der Inhalt lang genug für die Seite ist, das Menü mit der Seite nach oben scrollen und Ihre Hintergrundfarbe gewonnen ' t mehr nach unten? Position: absolut ist nicht dasselbe wie position: fixed.

Wenn das mit Ihnen in Ordnung ist, und wenn Sie OK sind mit einem CSS-Hack oder bedingten Kommentar nur für IE6, dann ist das Problem, dass IE6 nicht unterstützt Ihre Min-Höhe, aber die gute Nachricht ist es behandelt die Höhe genauso, wie es klein ist. Also dies nur tun:

html, body { /* you probably already have this set for all browsers */ 
    margin: 0; 
    padding: 0; 
} 

* html body { /* IE6 only */ 
    height: 100%; 
} 

Ich warf diese auf eine standard Modus Testseite und es scheint, genau wie die anderen Browser zu funktionieren.

Nun, wenn #menu in einem relativ positionierten Wrapper Div anstelle eines direkten Kind des Körpers ist, sieht wie andere Browser #menu an den unteren Rand des Dokuments, aber IE wird nicht einfach mit CSS zusammen spielen allein (es wird nur #menu auf die Höhe des anfänglichen Ansichtsfensters gesetzt). Es wäre jedoch eine ziemlich einfache Sache, mit JavaScript zu korrigieren.