Comment réparer Absolute Positioning dans IE8?

Dans chaque navigateur que j'ai utilisé, sauf ie8, un élément positionné de manière absolue peut être positionné en fonction du parent le plus proche avec un positionnement relatif.Comment réparer Absolute Positioning dans IE8?

Le code ci-dessous montre deux divs à l'intérieur d'une table. La div supérieure a une position: relative, cependant, l'élément imbriqué, absolument positionné ne respecte pas ses limites (en ie8, il est positionné en bas de la page au lieu du bas de la div parente).

Quelqu'un connaît-il un correctif pour cela?

<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>

Source

2009-09-01 edt

Déclarez un doctype. Je vous encourage à utiliser le doctype HTML5:

<!DOCTYPE html>

Source

2009-09-01 01:20:23 Sampson

C'est parce que vous n'utilisez pas le type de document. Et IE travaillant dans le "quircks" mode.

Essayez cette doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Source

2009-09-01 01:27:39 Sergei

Ajouter ceci:

#top { 
//height: 100%; 
} 
#position_me { 
//left: 0; 
}

Il oblige IE8 à calculer correctement la position en mode bizarreries. Il y a plusieurs façons de l'obtenir:

//zoom: 1; 
//writing-mode: tb-rl;

Voir http://haslayout.net/haslayout

Source

2010-01-28 16:12:49 yakunins

Vous pouvez également utiliser

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

Ce fixe mon problème!

Source

2011-12-11 21:53:48 Hanno

J'utiliserais toujours le doctype HTML5, mais dans mon cas, le seul problème était que l'élément parent avait besoin de "position: relative;" spécifiquement défini. après ça, ça a parfaitement fonctionné.

Source

2013-04-24 14:48:11 luschn

Bonne réponse! – leymannx

Comment réparer Absolute Positioning dans IE8?

Répondre

Questions connexes