Diseño de página fijo en IE6

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

Pregunta

El encabezado, el pie de página y las barras laterales tienen una posición fija.En el centro un área de contenido con ambas barras de desplazamiento.No hay barras de desplazamiento exteriores en el navegador.Tengo un diseño que funciona en IE7 y FF.Necesito agregar soporte para IE6.¿Cómo puedo hacer que esto funcione?

Aquí hay una aproximación de mi CSS actual.

<!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>
¿Fue útil?

Solución

Puede que sea excesivo para su proyecto, pero El javascript IE7 de Dean Edwards agrega soporte para posicionamiento fijo a IE6.

Otros consejos

Agregue el siguiente código al <head>

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

Añade el ie6fixed Clase CSS para lo que quieras ser position: fixed;

Pruebe IE7.js.Debería solucionar su problema sin tener que realizar ninguna modificación.

Enlace: IE7.js

Estas respuestas fueron útiles y me permitieron agregar una forma limitada de posicionamiento fijo a IE6, sin embargo, ninguna de ellas soluciona el error que rompe mi diseño en IE6 si especifico una propiedad CSS superior e inferior para mis barras laterales (que es la comportamiento que necesito).

Como no se pueden especificar la parte superior y la inferior, utilicé la parte superior y la altura.La propiedad de la altura resultó ser muy necesaria.Utilicé javascript para recalcular la altura cuando se carga la página y para cualquier cambio de tamaño.

A continuación se muestra el código que agregué a mi caso de prueba para que funcione.Esto podría ser mucho más limpio con 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]-->

Echa un vistazo a los trucos de CSS puro a continuación...algunos requieren forzarlo al modo peculiar (creo que es el más sólido) pero todos funcionan muy bien:

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

He usado esto con gran efecto, ¡espero que ayude!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top