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, вы увидите, что элемент "footer" остается после изменения CSS для "панели". Тот же пример, протестированный в IE8, FF и Chrome, ведет себя точно так, как ожидалось.

Я уже пробовал обновлять класс элемента, но это не работает, если окно браузера было открыто максимально, и никаких изменений размера не было сделано в окне (что составляет около 90% случаев использования для нашего продукта....:() Я застрял в решении на основе CSS, но я думаю, что могу сделать исключение в этом случае, если его можно легко сделать специфичным для IE7 (что означает, что другие браузеры будут вести себя стандартным образом с этим).

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

Ответы

Ответ 1

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

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

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

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

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

Свойство overflow запускает элемент для компоновки, см. также главу "Where Layout Comes From" :

Как и в IE7, overflow стал триггером компоновки.

Ответ 2

Это решение не обязательно должно иметь какое-либо отношение к динамическому контенту, но оно работало для меня (по крайней мере, сделало страницу обработанной до степени управления): укажите размеры. Я только заметил, что IE7 считал, что у div не было ширины при использовании инструмента CREPLE CLEX Click Tool (ctrl + B) в инструментах IE.

Ответ 3

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

// 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);