IE7相對/絕對定位的臭蟲以動態修改頁面內容

我在想，如果有有一個想法如何與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特定的（這意味着其他瀏覽器將在這個標準的方式）。

請幫幫忙！

來源

2010-03-18 Matthias Hryniszak

您是否嘗試過交換的文檔類型爲html嚴格或XHTML嚴格？然後會發生什麼？ – NotMe 2010-03-18 20:43:01

的確我沒有。問題是我無法控制doctype發送給客戶端的原因（因爲我無法在這裏討論），所以即使它已經工作也不會是解決方案... – 2010-04-28 08:32:02

2年後，問題（和答案）仍然非常有用！一段時間以來，我一直在嘲笑我的頭。甚至無法弄清楚如何正確地說出問題......謝謝！ – 2012-04-03 13:32:24

這涉及到IE的「hasLayout的錯誤」。相對定位#panel父母沒有佈局，因此IE在忘記重新調整大小/重新定位時忘記重新繪製子節點。

如果您將overflow: hidden;添加到相對定位的#panel父級，則問題將消失。

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

在這個IE漏洞深入的背景信息，可以在很好的參考"On having layout"被發現，然後爲您的特定問題，特別是章"Relatively positioned elements"：

注意position: relative不會觸發hasLayout的，這導致一些渲染錯誤，大部分消失或錯放內容。頁面重新加載，窗口大小調整和滾動，選擇可能會遇到不一致。有了這個屬性，IE補償了元素，但似乎忘記發送一個「重繪」到其佈局子元素（因爲佈局元素在重繪事件的信號鏈中將正確發送）。

的overflow屬性觸發因素有佈局，也請參見"Where Layout Comes From"：

隨着IE7的，overflow成爲佈局觸發。

來源

2010-03-18 20:45:58 BalusC

在IETester的IE7中無法確認：整件事消失。你確定這是它嗎？ – 2010-03-18 20:47:19

那就是A A Z I N G !!!謝謝！！！我一直在爲此掙扎2天，還沒有找到答案。非常感謝！ – 2010-03-18 20:47:47

噢，好吧，似乎已經完成了訣竅 - 也許我得到了錯誤的預期結果。 – 2010-03-18 20:48:27

這種解決方案並不一定有什麼做動態內容，但它的工作對我來說（至少取得borked在可管理的程度頁）：指定尺寸。我只注意到IE7認爲div在IE工具中使用蹩腳的'Select element by click'工具（ctrl + B）時沒有寬度。

來源

2011-08-11 16:44:59

我很高興它的工作，但你的答案會更適合作爲評論，而不是回答。 – webLacky3rdClass 2011-08-11 18:01:43

我已經創建了我的函數來觸發重繪。也許這不是一個正確的解決方案，但它的工作原理。

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

來源

2013-07-16 14:03:26 MaciejLisCK

IE7相對/絕對定位的臭蟲以動態修改頁面內容

回答

相關問題