IE7 относительная/абсолютная ошибка расположения с динамично измененным содержанием страницы

Question

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

css internet-explorer-7 relative absolute css-position

задан Machavity 9 September 2019 в 16:56

1 ответ

Другие вопросы по тегам:

css internet-explorer-7 relative absolute css-position

Похожие вопросы:

score 68 · Accepted Answer

Это связано с "ошибкой hasLayout" IE. Относительно позиционированный родительский элемент #panel не имеет макета, и, следовательно, IE забывает перерисовывать своих дочерних элементов при изменении размера / перемещении.

Проблема исчезнет, если вы добавите overflow: hidden; к относительно позиционированному родительскому элементу #panel .

#panel { position: relative; overflow: hidden; border: solid 1px black; }

Подробную справочную информацию об этой ошибке IE можно найти в отличном справочнике «О макете» , а затем для вашей конкретной проблемы, в частности, в главе «Относительно расположенные элементы» :

Обратите внимание, что position: relative не запускает hasLayout, что приводит к некоторым ошибкам рендеринга, в основном к исчезновению или перемещению содержимого. Несоответствия могут быть обнаружены при перезагрузке страницы, изменении размера окна и прокрутке, выборе. С этим свойством IE смещает элемент , но, кажется, забывает послать «перерисовку» своим дочерним элементам макета (поскольку элемент макета отправлялся бы правильно в цепочке сигналов событий перерисовки).

Свойство переполнения запускает у элемента макет, см. Также главу «Откуда макет» :

Начиная с IE7, переполнение стал макетом-спусковым крючком.