CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

¿Cómo se puede definir una position:fixed en Internet Explorer 6? El truco es sencillo, se trata de usar una expresión de Internet Explorer ; “eval”.

Internet Explorer tiene un multi-proceso de renderizado. Cuando tú mueves la barra de desplazamiento o redimensionas la ventana, todo se volverá a posicionar y se volverá a definir la página, después se procesarán las expresiones CSS. Esto hace que donde se encuentre la posición fija, los elementos tarden un poco para alcanzar la barra de scroll.

Para obtener una posición fija (fixed) en Internet Explorer debemos fijar una imagen de fondo en el cuerpo (body) o elementos HTML, con la propiedad background-attachment:fixed. No necesitas una imagen real, puedes usar about:blank seguido de un spacer.gif y hará lo mismo.

Os ofrecemos el código CSS a continuación:

Código CSS

/*¡Haz que la posicion Fixed funcione correctamente en IE6!*/

.fixed-top    /* position fixed Top    */{position:fixed; bottom: auto;top:0px;}
.fixed-bottom /* position fixed Bottom */{position:fixed; bottom: 0px;top:auto;}
.fixed-left   /* position fixed Left   */{position:fixed; right:auto;left:0px;}
.fixed-right  /* position fixed right  */{position:fixed; right: 0px;left:auto;}

* html,* html body   /* IE6 Fixed Position Jitter Fix */{background-image:url(about:blank);background-attachment:fixed;}

* html .fixed-top    /* IE6 position fixed Top        */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}

* html .fixed-right  /* IE6 position fixed right      */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}

* html .fixed-bottom /* IE6 position fixed Bottom     */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}

* html .fixed-left   /* IE6 position fixed Left       */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

Os ofrecemos otro método para no tener que utilizar comentarios condicionales al usar la declaración “important!”:

* { margin:0; padding:0; }

html, body {
* { margin:0; padding:0; }
html, body {
    height: 100%;
    overflow:auto;
}
body #fixedElement {
    position:fixed !important;
    position: absolute; /*ie6 and above*/
    bottom: 0;
}
height: 100%;
overflow:auto;
}
body #fixedElement {
position:fixed !important;
position: absolute; /*ie6 and above*/
bottom: 0;
}
* { margin:0; padding:0; }
html, body {
    height: 100%;
    overflow:auto;
}
body #fixedElement {
    position:fixed !important;
    position: absolute; /*ie6 and above*/
    bottom: 0;
}

Vía | Subtle