我有一个简单的框架集，有两个垂直框架，即两行:
第一行包含一个固定的标题。
第二行在顶部包含一个固定工具栏，在底部包含一个可调整大小的工具栏。
由于浏览器之间的渲染差异，我不能只为“内容”框架启用滚动，因为这意味着整个框架(包括工具栏)在某些浏览器中会滚动，而只有底部的可调整大小的部分会滚动在其他浏览器中获得滚动条(这是我想要的)。下面的示例中缺少用于控制容器和 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>
标题.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>
最佳答案
带有 DTD 的 IE7 需要:
<style>
html, body {
height: 100%;
}
</style>
关于javascript - 当页面是框架集的一部分并垂直调整大小时，在 IE7 中不会触发 body onresize 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1422253/