IE7 und feste divs Problem
-
22-07-2019 - |
Frage
Hintergrund
Ich brauche ein ziemlich komplexes Layout für einen Kunden zu tun, festen DIV verwenden. Alles ist in Ordnung in IE8, FF3 und Chrome, aber IE7 mangles ganze Sache
Edit: Die festen DIVs sind ein Muss, muss nur der Inhalt DIV blättern (Das ist die Spezifikation, 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
Notizen
Ich bin nicht so besorgt über IE6, weil ich es weiß nicht, Fixed
Elemente nicht unterstützt, aber wenn Sie wissen, wie es zu beheben, toll!
Fragen
- Was soll ich über IE7 Fehler kennen das Problem zu beheben?
- Wie kann ich die links in den Kopfspalten relativ zu dem Wrapper Referenz
- Warum die Kopfspalte geht die das Recht und die rechte Spalte verschwindet?
Lösung
Gefunden ein fix !! Seltsam genug floating der Inhalt Fixes es right
!
Muss ich ein Cookie verdienen?
<!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>
Andere Tipps
Was folgt aus:
<!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>
Es funktioniert auf IE7, Firefox, Opera, Safari und Chrome. Ich denke, es wird auch in IE6 und IE8 zu arbeiten.
Ich hatte die Breite des „Inhalts“, weil der (Rechte Spalte + Inhalt + Header)
Die feste Position funktioniert nicht in älteren Browsern. Sie können die Elemente nebeneinander schweben.
Geben Sie eine Null-Auffüllung für den Körper auch verwendet Opera ein Standard-padding statt Marge (die eigentlich mehr Sinn macht).
Ich habe die Stile in einem Stylesheet, um den Code sauberer zu machen:
<!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>
<!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!
Wenn skriptbasierte Lösungen akzeptabel sind, dann habe ich eine gewissen Erfolg mit fester divs hat (nicht unbedingt mit dem Layout, das Sie haben) mit Dean Edwards' Upgrade-Skripte des Patch IE Verhalten mehr zu sein, wie die Standards an.