css - for - ¿Cómo arreglar el posicionamiento absoluto en IE8?
css only for ie 11 (6)
Agrega esto:
#top {
//height: 100%;
}
#position_me {
//left: 0;
}
Obliga a IE8 a calcular la posición correctamente en el modo de peculiaridades. Hay muchas maneras de conseguirlo:
//zoom: 1;
//writing-mode: tb-rl;
En todos los navegadores que he usado, excepto ie8, un elemento posicionado absolutamente se puede posicionar de acuerdo con el padre más cercano con posicionamiento relativo.
El siguiente código muestra dos divs dentro de una tabla. El div superior tiene posición: relativo, sin embargo, el elemento anidado, absolutamente posicionado no respeta sus límites (en ie8, se posiciona en la parte inferior de la página en lugar de la parte inferior del div principal).
¿Alguien sabe una solución para esto?
<style>
#top {
position: relative;
background-color: #ccc;
}
#position_me {
background-color: green;
position: absolute;
bottom: 0;
}
#bottom {
background-color: blue;
height: 100px;
}
</style>
<table>
<tr>
<td><div id="top"> Div with id="top"
<div id="position_me"> Div with id="position me" </div>
</div>
<div id="bottom"> Div with id="bottom"
<p>Lorem ipsum dolor sit amet.</p>
</div></td>
</tr>
</table>
Declara un doctype. Te animo a que uses el doctype HTML5:
<!DOCTYPE html>
Eso es porque no estás usando el tipo de documento. E IE trabajando en el modo "peculiaridades" .
Prueba este doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Siempre usaba el doctype HTML5, pero en mi caso el único problema era que el elemento padre necesitaba "position: relative;" específicamente establecido después de eso, funcionó perfectamente bien.
También puedes usar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
¡Esto solucionó mi problema!
Microsoft dice:
En la mayoría de los casos, recomendamos que los sitios web utilicen el tipo de documento HTML5 para admitir la más amplia variedad de estándares establecidos y emergentes, así como la más amplia gama de navegadores web. Este ejemplo muestra cómo especificar el tipo de documento HTML5.
Para más Info