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

StackOverflow https://stackoverflow.com/questions/2473171

Вопрос

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

Пожалуйста, помогите!

Это было полезно?

Решение

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

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

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

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

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

Тот самый overflow свойство запускает элемент для создания макета, см. Также главу "Откуда Берется Верстка":

По состоянию на IE7, overflow стал макетом-триггером.

Другие советы

Это решение не обязательно имеет какое-либо отношение к динамическому контенту, но у меня оно сработало (по крайней мере, сделало страницу загруженной до приемлемой степени).: укажите размеры.Я только заметил, что IE7 считает, что у div нет ширины при использовании дерьмового инструмента "Выбрать элемент щелчком мыши" (ctrl + B) в IE tools.

Я создал свою функцию для запуска перерисовки.Может быть, это неправильное решение, но оно работает.

// Script to fix js positon bug on IE7

// Use that function, recomended delay: 700
function ie7fixElementDelayed(elements, delay) {
    window.setTimeout(
        function () {
            if(navigator.appVersion.indexOf("MSIE 7.") != -1) {
                ie7fixElement(elements);
            }
        },
        delay
    );
}

function ie7fixElement(elements) {
    elements.each(function(i) {
        var element = $(this);
        var orginalDisplayValue = element.css("display");

        element.css("display", "none");
        element.css("display", orginalDisplayValue);
    });
}

Пример использования:

ie7fixElementDelayed($('#HandPickedWidget .widget'), 700);
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top