web-dev-qa-db-fra.com

Comment réparer le positionnement absolu dans IE8?

Dans tous les navigateurs que j'ai utilisés, à l'exception de ie8, un élément positionné de manière absolue peut être positionné en fonction du parent le plus proche avec le positionnement relatif.

Le code ci-dessous montre deux divs dans une table. La div du haut a la position: relative, cependant, l'élément imbriqué, absolument positionné, ne respecte pas ses limites (dans ie8, il se positionne au bas de la page au lieu du bas de la div parent).

Est-ce que quelqu'un connaît 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>
cssinternet-explorer-8css-position
24
edt

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

<!DOCTYPE html>
24
Sampson

Ajoute ça:

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

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

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

Voir http://haslayout.net/haslayout

19
yakunins

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

Essayez ce doctype:

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

j'utilisais 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 cela, cela a parfaitement fonctionné.

6
luschn

Vous pouvez aussi utiliser

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

Cela a résolu mon problème!

2
Hanno