IE6 Layout Problem - absolute Positionierung

Der folgende HTML sieht wie in Firefox 2 & 3 und IE7 erforderlich. Die Left Schaltfläche ist auf der linken Seite, die Right Schaltfläche ist auf der rechten Seite, und der Text in der Mitte ist ... in der Mitte!IE6 Layout Problem - absolute Positionierung

Bei IE6 ist die Left Schaltfläche jedoch falsch ausgerichtet - sie erscheint zentriert.

Kann jemand vorschlagen, warum?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Layout problem!</title> 
    <style type="text/css"> 
     DIV#Footer 
     { 
      padding: 10px; 
      color: #fff; 
      background-color: #484848; 
      position: relative; 
      text-align: center; 
     } 
     DIV#Footer INPUT 
     { 
      margin: 5px 15px; 
      position: absolute; 
      top: 0px; 
     } 
     DIV#Footer INPUT.right 
     { 
      right: 0px; 
     } 
     DIV#Footer INPUT.left 
     { 
      left: 0px; 
     } 
    </style> 
</head> 
<body> 
    <div id="Footer"> 
     <input class="left" type="button" value="Left" /> 
     Some text in the middle 
     <input class="right" type="button" value="Right" /> 
    </div> 
</body> 
</html>

(Ich habe das IE Developer-Tool wurde unter Verwendung dieses zu versuchen und zu analysieren und zu beheben, ohne Erfolg ...)

Quelle

2009-02-11 Richard Everett

Sie müssen die hasLayout Eigenschaft auslösen (ein IE-Sache ...) von #footer. Breite und Höhe lösen es aus, wenn Sie keine Breite oder Höhe festlegen möchten, können Sie die IE-only-Eigenschaft in CSS verwenden.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Layout problem!</title> 
    <style type="text/css"> 
     div#footer 
     { 
      padding: 10px; 
      color: #fff; 
      background-color: #484848; 
      position: relative; 
      text-align: center; 
      zoom: 1; 
     } 
     div#footer input 
     { 
      margin: 5px 15px; 
      position: absolute; 
      top: 0; 
     } 
     div#footer input.right 
     { 
      right: 0; 
     } 
     div#footer input.left 
     { 
      left: 0; 
     } 
    </style> 
</head> 
<body> 
    <div id="footer"> 
     <input class="left" type="button" value="Left"> 
     Some text in the middle 
     <input class="right" type="button" value="Right"> 
    </div> 
</body> 
</html>

IIRC, in IE, Elemente haben zwei verschiedene Layout-Verhalten, ein, wenn hasLayouttrue ist, und eine andere, wenn es false. Stellen Sie sicher, dass es auf true eingestellt ist, kann viele seltsame Layout-Probleme wie diese beheben.

Quelle

2009-02-11 17:24:35 nlogax

Das ist ziemlich peverse! Danke Jonas. Das funktioniert fast perfekt - es scheint, die Breite meiner enthaltenen Div durch ein paar Pixel in IE6 zu schieben. –

Die Einstellung des Zooms ändert den Cursor. Möchte dies auf IE6 beschränken, indem Sie der Regel ein _ voranstellen. –

Ich sehe keinen Cursor Probleme ändern Björn –

Sie schwebte/positionierte Elemente sollen zuerst vor normal ausgerichtetem Text in Ordnung sein. Positioniere sie nicht in der Reihenfolge, in der sie erscheinen.

Sie können auch einen! Wichtig hinzufügen, um die Priorität zu erhöhen und die IE-Entwickler-Symbolleiste von Microsoft zu verwenden, um zu sehen, welche Regeln wirksam werden. Wie groß ist die Breite des Elternelements?

Es sieht aus wie es sollte nur funktionieren, aber.

Quelle

2009-02-11 17:13:00

Danke, aber das scheint die Dinge nicht zu ändern. Auch dies würde Dinge für Benutzer mit einem Bildschirmleser durcheinander bringen. –

Versuchen Sie, diese (verzeihen Sie die Inline-Stil!)

<div id="Footer"> 
    <div style="width:100%"> 
    <input class="left" type="button" value="Left" /> 
    Some text in the middle 
    <input class="right" type="button" value="Right" /> 
    </div> 
    </div>

Quelle

2009-02-11 17:14:36 AJM

Ziemlich ausgezeichnet - danke AJM! Jedoch, in IE6 gibt es jetzt eine 20px Lücke zwischen der linken der linken Taste und der Kante der Fußzeile ... –

Ich werde ein bisschen eine Chance zu Ihrem Ansatz vorzuschlagen, und sehen Sie, wenn Sie mit diesem kein Glück haben:

<style type="text/css"> 
    DIV#Footer 
    { 
     padding: 10px; 
     color: #fff; 
     background-color: #484848; 
     position: relative; 
     text-align: center; 
    } 
    DIV#Footer INPUT 
    { 
     margin: 5px 15px; 
     position: absolute; 
     top: 0px; 
    } 
    DIV#Footer INPUT.right 
    { 
     float: right; 
    } 
    DIV#Footer INPUT.left 
    { 
     float: left; 
    } 
    #Footer .center { 
     float: left; 
    } 

</style>

Dann in der HTML

<div id="Footer"> 
    <input class="right" type="button" value="Right" /> 
    <input class="left" type="button" value="Left" /> 
    <div class="center">Some text in the middle</div> 
</div>

Sie würden dann haben durchzugehen und ihnen einige Ränder zu geben, um sie so auszurichten, wie Sie sie wollen. Dies funktioniert nicht für ein flüssiges Layout, es sei denn, Sie geben der Fußzeile oder einem Container in der Fußzeile für diese Elemente eine feste Breite.

Quelle

2009-02-12 01:26:53 Matt

Das scheint überhaupt nicht zu funktionieren Ich habe Angst Matt ... –

Wie Jonas sagte.

Im Zweifelsfall empfehle ich, eine Breite explizit anzugeben, auch wenn sie nicht benötigt wird, und ich ziehe es vor, diese über "Zoom" zu verwenden, da der Zoom das Layout nicht beheben konnte. Die explizite Einstellung einer Breite ist jedoch nicht immer möglich, so dass "Zoom" den Trick darstellt.

Quelle

2009-02-12 23:19:51

Eine andere Option, die ich gefunden habe, um mit absolut positionierten div-Tags in ie6 zu arbeiten, besteht darin, sowohl die linken als auch die rechten Werte im CSS hinzuzufügen.

Es ist einfache Mathematik, wenn Sie die Breiten der Divs kennen, mit denen Sie arbeiten.

Scheint, die div-Box an Ort und Stelle "zu heften".

Ich habe alle anderen Vorschläge versucht, die ich gelesen habe (einschließlich Javascript, um ie6 zu zwingen, sich wie ie7 oder ie8 zu verhalten), aber sie haben nicht funktioniert.

Die obige Lösung tat.

Viel Glück!

Quelle

2010-02-09 20:54:53

IE6 Layout Problem - absolute Positionierung

Antwort

Verwandte Themen