IE7 und fixierten divs problem

Hintergrund

Ich tun müssen, um ein ziemlich Komplexes layout für einen client mit fester DIV. Alles in Ordnung ist, in IE8, FF3 und Chrome, aber IE7 mangles alle die Sache

Edit: Die fixierten DIVs sind ein muss, nur den content-DIV muss scrollen (das ist die Skillung, sorry)

HTML-und CSS-code

<!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">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
    test
</title>

    <!--[if lt IE 8]>

    <![endif]--> 

    <!--[if lt IE 7]>

    <![endif]--> 

</head>

<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative;  border: 1px solid red; overflow: hidden;">

    <div id="header" style="position: fixed; width: 185px;  height: 600px;  top: 10px;  border: 1px solid blue;">
      header
    </div>

    <div id="content" style="width: 680px; float: left; background: white; margin-left: 185px;  min-height: 600px;  border: 1px solid lime;">
        content
    </div>

    <div id="rightcolumn" style="position: fixed; top: 10px; width: 90px; margin-left: 865px;   height: 600px;border: 1px solid maroon;">
        right
    </div>

</div> 


</body>
</html>

Breite IE8, FF3 und Chrome

IE8, FF3 und Chrome http://img39.imageshack.us/img39/406/firefoxkpd.jpg

Breite IE7

IE7 http://img23.imageshack.us/img23/1315/ie7l.jpg

Notes

Ich bin nicht so besorgt über den IE6, weil ich weiß, dass es nicht unterstützt Fixed Elemente, aber wenn man weiß wie man es beheben, toll!

Fragen

  1. Was sollte ich wissen über den IE7 bugs, das problem zu beheben?
  2. Wie kann ich mich auf die Links in der header-Spalten relativ zu den wrapper -
  3. Warum der header-Spalte geht die das Recht und die Rechte Spalte verschwindet?
InformationsquelleAutor Eduardo Molteni | 2009-08-04
  1. 1

    Gefunden ein Update!! Seltsam genug, schweben die Inhalte right behebt es!

    Verdiene ich ein cookie?

    <!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">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
    test
</title>

    <!--[if lt IE 8]>

    <![endif]--> 

    <!--[if lt IE 7]>

    <![endif]--> 

</head>

<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative;  border: 1px solid red; overflow: hidden;">

    <div id="header" style="position: fixed; width: 185px; height: 600px;   top: 10px; border: 1px solid blue;">
      header
    </div>

    <div id="content" style="float: right; width: 680px; margin-right: 90px; height: 600px; border: 1px solid lime;">
        content
    </div>    

    <div id="rightcolumn" style="position: fixed; top: 10px; width: 90px; margin-left: 865px;   height: 600px;border: 1px solid maroon;">
        right
    </div>


</div> 


</body>
</html>
    InformationsquelleAutor Eduardo Molteni
  2. 0

    Was dazu:

    <!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">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
    test
</title>

    <!--[if lt IE 8]>

    <![endif]--> 

    <!--[if lt IE 7]>

    <![endif]--> 

</head>

<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative;  border: 1px solid red; overflow: hidden;">

    <div id="header" style="float: left; width: 185px;  height: 600px;      top: 10px;      border: 1px solid blue;">
      header
    </div>

    <div id="content" style="width: 650px; float: left; background: white; left: 185px;  min-height: 600px; height: 600px;      border: 1px solid lime;">
        content
    </div>

    <div id="rightcolumn" style="float: left; top: 10px; width: 90px; left: 865px;   height: 600px;border: 1px solid maroon;">
        right
    </div>

</div> 
</body>
</html>

    Funktioniert es auf IE7, Firefox, Opera, Safari und Chrome. Ich denke, es funktioniert in IE6 und IE8 auch.
    Ich musste reduzieren Sie die Breite der "Inhalt", weil die (rightcolumn+content+header) < wrapper

    • Ich habe nicht verwendet, "fixed" - divs, aber ich denke, dass es nicht ein muss, wenn es funktioniert. Ist es?
    • Ihre Lösung konnte nicht ordnungsgemäß gerendert. Ich versuchte es auf einem 24" - monitor läuft IE7. Es gibt eine extra Rechte Spalte.
    • Es ist nicht eine zusätzliche Rechte Spalte, es ist der wrapper, der größer ist als alle child-divs. (185+650+90)=925 > 960
    • Sorry Wenn ich nicht klar, ich brauchen die fixierten divs
    InformationsquelleAutor Diego Jancic
  3. 0

    Die Feste position funktioniert nicht in älteren Browsern. Sie können schweben die Elemente neben einander.

    Geben Sie eine null-Polsterung für den Körper auch Opera nutzt eine Standard-padding statt margin (was eigentlich mehr Sinn macht).

    Ich die Formatvorlagen in einem Stylesheet zu machen, der code sauberer:

    <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>

<style type="text/css">
body { margin: 10px; padding: 0; }
#wrapper { width: 960px; margin: 0 auto; border: 1px solid red; overflow: hidden; }
#header { float: left; width: 185px; height: 600px; border: 1px solid blue; }
#content { float: left; width: 680px; background: white; min-height: 600px; border: 1px solid lime; }
#rightcolumn { float: left; width: 89px; height: 600px; border: 1px solid maroon; }
</style>

</head>
<body>

<div id="wrapper">
   <div id="header">
      header
   </div>
   <div id="content">
      content
   </div>
   <div id="rightcolumn">
      right
   </div>
</div> 

</body>
</html>
    • Das problem ist mit dem Fixer Spalten. Ich denke nicht, dass IE7 eine "ältere browser", und es unterstützt Fixierten divs (oder zumindest das ist, was im Handbuch steht)
    InformationsquelleAutor Guffa
  4. 0
    <!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">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
    test
</title>

    <!--[if lt IE 8]>

    <![endif]--> 

    <!--[if lt IE 7]>

    <![endif]--> 

</head>

<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative;  border: 1px solid red; overflow: hidden;">

    <div id="header" style="width: 185px; float: left;  height: 600px;      top: 10px;      border: 1px solid blue;">
      header
    </div>

    <div id="content" style="width: 680px; float: center; background: white; margin-left: 185px;  min-height: 600px;      border: 1px solid lime;">
        content
    </div>

    <div id="rightcolumn" style="position: fixed; top: 10px; width: 95px; margin-left: 865px;   height: 600px;border: 1px solid maroon;">
        right
    </div>

</div> 


</body>
</html>

    Das sollte es tun!

    • Sorry Wenn ich nicht klar, ich brauchen die fixierten divs
    InformationsquelleAutor Michael Brown
  5. 0

    Wenn Skript-basierte Lösungen akzeptabel sind, dann habe ich einigen Erfolg gehabt mit fixierten divs (nicht unbedingt mit dem layout, das Sie haben) mit Dean Edwards' upgrade-Skripten die patch-IE-Verhalten, mehr wie die standards zeigen.

    • Ich habe es versucht, aber funktioniert nicht. Die Sache ist, dass angeblich IE7 unterstützt Fixierten DIVs, aber nicht wissen, wie Sie den header auf der linken und der rechten Spalte auf der rechten Seite.
    InformationsquelleAutor Steve Gilham
Schreibe einen Kommentar