Je me demandais si il y a quelqu'un d'avoir une idée de comment aborder avec le problème suivant dans IE7:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE7 absolute positioning bug</title>
<style type="text/css">
#panel { position: relative; border: solid 1px black; }
#spacer { height: 100px; }
#footer { position: absolute; bottom: 0px; }
</style>
<script type="text/javascript">
function toggle() {
var spacer = document.getElementById("spacer");
var style = "block";
if (spacer.style.display == "block" || spacer.style.display == "") {
style = "none";
}
spacer.style.display = style;
}
</script>
</head>
<body>
<div id="panel">
<button onclick="toggle();">Click me</button>
<br /><br /><br />
<div id="spacer"></div>
<div id="footer">This is some footer</div>
</div>
</body>
</html>
Lorsque vous exécutez cette dans IE7, vous verrez que le "pied de page" élément qui reste après la modification de la CSS pour le "panneau de configuration". Le même exemple testé avec IE8, FF et Chrome se comporte exactement comme prévu.
J'ai déjà essayé la mise à jour de l'élément de la classe, mais cela ne fonctionne pas si la fenêtre du navigateur a été ouvert au maximum et pas plus loin la taille de modifications ont été apportées à la fenêtre (qui est d'environ 90% des cas d'utilisation que nous avons pour nos produits.... :( ) Je suis coincé avec un CSS à base de solution mais je pense que je peux faire une exception, dans ce cas, si elle peut être facilement fait en IE7 spécifiques (ce qui signifie que les autres navigateurs vont se comporter d'une manière standard avec cette).
S'il vous plaît aider!
