身體在onResize事件不會在IE7火的時候，頁面是一個框架的一部分，並調整垂直

我有上下兩個框架，即兩行簡單的框架：身體在onResize事件不會在IE7火的時候，頁面是一個框架的一部分，並調整垂直

第一行包含一個固定的頭。

第二行包含一個固定工具欄的頂部和一個可調整大小都在底部。由於瀏覽器之間的渲染差異，我不能只爲「內容」框啓用滾動功能，因爲這意味着整個框架（包括工具欄）會在某些瀏覽器中滾動，而只有底部的可調整大小的部分會在其他瀏覽器中得到一個滾動條（這是我想要的）。用於控制容器和toolbarContainer元素的CSS是從下面的例子裏缺了，但現在，這是不相關的。如果我在使用IE7時垂直調整瀏覽器窗口的大小（IE7在IE7兼容模式下，但是純粹的IE7展示相同的問題），我不會得到body元素的onresize事件。。在我已經嘗試了所有其他的瀏覽器，我得到了在onResize事件，如果我水平調整瀏覽器窗口，我也是在IE7得到事件。

是否有與IE7在這方面的活動的onResize一個已知的問題？

注1：我知道我應該得到完全擺脫框架的，但這不是現在的選項。注意2：我已經搜索了關於此主題的信息，但由於該問題似乎只出現在IE7的&幀上下文中，所以現在不太可能影響太多的開發人員。

的index.htm：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Resize Test</title> 
    </head> 
    <frameset rows="104,*" framespacing="0" frameborder="no"> 
     <frame src="header.htm" name="header" frameborder="0" noresize="noresize" scrolling="no" marginheight="0" marginwidth="0" /> 
     <frame src="content.htm" name="content" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" /> 
    </frameset> 
</html>

header.htm：

<!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>Header</title> 

     <style type="text/css" media="all"> 
       body { margin: 0px; 
        padding: 0px; 
        width: 100%; 
        height: 104px; 
        } 
     </style> 
    </head> 

    <body> 
     <img alt="" width="699" height="104" border="0" src="header.png" /> 
    </body> 
</html>

content.htm：

<!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>Content</title> 

     <script type="text/javascript"> 
      function repositionContainers() { 
       //document.write('resize'); 
       var divWrapper = document.getElementById('wrapper'); 
       var divContainer = document.getElementById('container'); 
       var wrapWidth = divWrapper.clientWidth; 
       var wrapHeight = divWrapper.clientHeight - 27; 
       // (resizing code follows here ...) 
      } 
     </script> 

     <style type="text/css" media="all"> 
      body { background: #ffa; 
        margin: 0px; 
        padding: 0px; 
        width: 100%; 
        height: 100%; 
       } 
     </style> 

    </head> 

    <body onload = "repositionContainers();" onresize="repositionContainers();"> 
     <div id="wrapper"> 
      <div id="toolbarContainer"> 
       <img alt="" width="212" height="27" border="0" src="toolbar.png" /> 
      </div> 
      <div id="container"> 
       <h1>Contents goes here ...</h1> 
      </div> 
     </div> 
    </body> 
</html>

來源

2009-09-14 Joergen Bech

IE7與DTD需要：

<style> 
html, body { 
    height: 100%; 
} 
</style>

來源

2010-07-06 20:22:51

謝謝，解決了IE7調整大小（使用frameset）的問題。 – 2012-11-20 16:34:08

謝謝，爲我工作。最初它似乎沒有工作，但我想我的舊樣式表必須被緩存。 – Itison 2013-05-27 22:08:52

身體在onResize事件不會在IE7火的時候，頁面是一個框架的一部分，並調整垂直

回答

相關問題