Das Seitenlayout in IE6 wurde korrigiert

StackOverflow https://stackoverflow.com/questions/30346

Frage

Kopf-, Fuß- und Seitenleisten haben eine feste Position.In der Mitte ein Inhaltsbereich mit beiden Bildlaufleisten.Keine äußeren Bildlaufleisten im Browser.Ich habe ein Layout, das in IE7 und FF funktioniert.Ich muss IE6-Unterstützung hinzufügen.Wie kann ich das zum Laufen bringen?

Hier ist eine Annäherung an mein aktuelles CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <title>Layout</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
      border: 0px;
    }

    .sample-border {
      border: 1px solid black;
    }

    #header {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      height: 60px;
    }

    #left-sidebar {
      position: absolute;
      top: 65px;
      left: 0px;
      width: 220px;
      bottom: 110px;
    }

    #right-sidebar {
      position: absolute;
      top: 65px;
      right: 0px;
      width: 200px;
      bottom: 110px;
    }

    #footer {
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;
      height: 105px;
    }

    @media screen {
      #content {
        position: absolute;
        top: 65px;
        left: 225px;
        bottom: 110px;
        right: 205px;
        overflow: auto;
      }
      body #left-sidebar,
      body #right-sidebar,
      body #header,
      body #footer,
      body #content {
        position: fixed;
      }
    }
  </style>
</head>

<body>
  <div id="header" class="sample-border"></div>
  <div id="left-sidebar" class="sample-border"></div>
  <div id="right-sidebar" class="sample-border"></div>
  <div id="content" class="sample-border"><img src="/broken.gif" style="display: block; width: 3000px; height: 3000px;" /></div>
  <div id="footer" class="sample-border"></div>
</body>

</html>
War es hilfreich?

Lösung

Könnte für Ihr Projekt übertrieben sein, aber Das IE7-Javascript von Dean Edwards fügt IE6 Unterstützung für feste Positionierung hinzu.

Andere Tipps

Fügen Sie den folgenden Code hinzu <head>

<!--[if lte IE 6]>
<style type="text/css">
html, body {
    height: 100%;
    overflow: auto;
}
.ie6fixed {
    position: absolute;
}
</style>
<![endif]-->

Ergänzen Sie die ie6fixed CSS-Klasse zu dem, was Sie sein möchten position: fixed;

Versuchen Sie es mit IE7.js.Sollte Ihr Problem beheben, ohne dass Änderungen vorgenommen werden müssen.

Verknüpfung: IE7.js

Diese Antworten waren hilfreich und ermöglichten mir das Hinzufügen einer begrenzten Form der festen Positionierung zu IE6. Allerdings behebt keine davon den Fehler, der mein Layout in IE6 beschädigt, wenn ich sowohl eine obere als auch eine untere CSS-Eigenschaft für meine Seitenleisten spezifiziere (was die ist). Verhalten, das ich brauche).

Da oben und unten nicht angegeben werden können, habe ich oben und Höhe verwendet.Die Höheneigenschaft erwies sich als sehr notwendig.Ich habe Javascript verwendet, um die Höhe beim Laden der Seite und bei etwaigen Größenänderungen neu zu berechnen.

Unten ist der Code, den ich meinem Testfall hinzugefügt habe, damit er funktioniert.Dies könnte mit jQuery viel sauberer sein.

<!--[if lt IE 7]>
<style>
body>div.ie6-autoheight {
  height: 455px;
}
body>div.ie6-autowidth {
  right: ;
  width: 530px;
}
</style>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<script type="text/javascript">

function fixLayout() {
   if (document.documentElement.offsetWidth) {
      var w = document.documentElement.offsetWidth - 450;
      var h = document.documentElement.offsetHeight - 175;
      var l = document.getElementById('left-sidebar');
      var r = document.getElementById('right-sidebar');
      var c = document.getElementById('content');

      c.style.width = w;
      c.style.height = h;
      l.style.height = h;
      r.style.height = h;
   }
}
window.onresize = fixLayout;
fixLayout();
</script>
<![endif]-->

Schauen Sie sich unten die reinen CSS-Hacks an ...Bei manchen muss man den Quirks-Modus erzwingen (ich denke, das ist am robustesten), aber alle funktionieren wirklich gut:

http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/ http://tagsoup.com/cookbook/css/fixed/

Ich habe dies mit großem Erfolg genutzt und hoffe, es hilft!

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top