IE7 относительная/абсолютная ошибка расположения с динамично измененным содержанием страницы
Я задавался вопросом, существует ли кто-либо имеющий идею, как заняться со следующей проблемой в 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>
При выполнении этого в IE7, Вы будете видеть, что элемент "нижнего колонтитула" остается после изменения CSS для "панели". Тот же пример, протестированный в IE8, FF и Chrome, ведет себя точно как ожидалось.
Я уже попытался обновить класс элемента, но это не работает, если окно браузера было открыто максимизируемое, и никакие дальнейшие изменения размера не были внесены в окно (который составляет приблизительно 90% вариантов использования, которые мы имеем для нашего продукта.... :(), я застреваю с основанным на CSS решением однако, я думаю, что могу сделать исключение в этом случае, если это может легко быть сделано IE7-конкретным (что означает, что другие браузеры будут вести себя стандартным способом с этим).
Помогите!