3

我有一个简单的框架集，垂直有两个框架，即两行：

第一行包含一个固定的标题。

第二行在顶部包含一个固定工具栏，在底部包含一个可调整大小的工具栏。

由于浏览器之间的渲染差异，我不能只为“内容”框架启用滚动，因为这意味着包括工具栏在内的整个框架将在某些浏览器中滚动，而只有底部可调整大小的部分会获得滚动条在其他浏览器中（这是我想要的）。下面的示例中缺少用于控制 container 和 toolbarContainer 元素的 css，但现在这不相关。

问题是：鉴于下面的示例代码，如果我在使用 IE7 时垂直调整浏览器窗口的大小（IE8 在 IE7 兼容模式下，但纯 IE7 会出现同样的问题），我不会收到 body 元素的 onresize 事件。在我尝试过的所有其他浏览器中，我确实收到了 onresize 事件，如果我水平调整浏览器窗口的大小，我也会在 IE7 中收到该事件。

在这种情况下，IE7 和 onresize 事件是否存在已知问题？

注意 1：我知道我应该完全摆脱框架集，但这不是现在的选择。

注2：我已经搜索过这个主题的信息，但是由于这个问题似乎只出现在IE7&frame上下文中，现在不太可能影响到太多的开发者。

索引.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>

内容.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>
4

1 回答 1

7

带有 DTD 的 IE7 需要：

<style>
html, body {
    height: 100%;
}
</style>
于 2010-07-06T20:22:51.220 回答