Mise en page fixe dans IE6

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

Question

L'en-tête, le pied de page et les barres latérales ont une position fixe.Au centre une zone de contenu avec les deux barres de défilement.Aucune barre de défilement externe sur le navigateur.J'ai une mise en page qui fonctionne dans IE7 et FF.Je dois ajouter le support IE6.Comment puis-je faire en sorte que cela fonctionne ?

Voici une approximation de mon CSS actuel.

<!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>
Était-ce utile?

La solution

Cela pourrait être excessif pour votre projet, mais Le javascript IE7 de Dean Edwards ajoute la prise en charge du positionnement fixe à IE6.

Autres conseils

Ajoutez le code suivant au <head>

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

Ajouter le ie6fixed Classe CSS pour ce que vous voulez être position: fixed;

Essayez IE7.js.Devrait résoudre votre problème sans avoir à apporter de modifications.

Lien: IE7.js

Ces réponses ont été utiles et m'ont permis d'ajouter une forme limitée de positionnement fixe à IE6, mais aucune d'entre elles ne corrige le bogue qui interrompt ma mise en page dans IE6 si je spécifie à la fois une propriété CSS supérieure et inférieure pour mes barres latérales (qui est la comportement dont j'ai besoin).

Comme le haut et le bas ne peuvent pas être spécifiés, j'ai utilisé le haut et la hauteur.La propriété de hauteur s’est avérée très nécessaire.J'ai utilisé javascript pour recalculer la hauteur lors du chargement de la page et pour tout redimensionnement.

Vous trouverez ci-dessous le code que j'ai ajouté à mon scénario de test pour le faire fonctionner.Cela pourrait être beaucoup plus propre avec jQuery.

<!--[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]-->

Découvrez les hacks CSS purs ci-dessous...certains nécessitent de le forcer en mode bizarreries (je pense que c'est le plus robuste) mais tous fonctionnent très bien :

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

Je l'ai utilisé à bon escient, j'espère que cela vous aidera !

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top