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-конкретным (что означает, что другие браузеры будут вести себя стандартным способом с этим).

Помогите!

30
задан Machavity 9 September 2019 в 16:56
поделиться