一个项目后台,框架结构,已兼容IE6、IE7、IE8、firefox、Chrome以及遨游等浏览器,但在IE9下确出现显示问题。如下图所示:
原代码
frameMain.php
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<frameset rows="98,*,8" cols="*" framespacing="0" frameborder="NO" border="0" id="mainset">
<frame src="top.php" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />
<frameset rows="*,0" cols="*" framespacing="0" frameborder="NO" scrolling="no" border="0" id="fset3">
<frame src="middle.php?folder=public" name="mainFrame" id="mainFrame" />
<frame src="about:blank" name="download" scrolling="NO" noresize>
</frameset>
<frame src="down.php" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" />
</frameset>
<noframes>
</head>
<body></body>
</noframes>
</html>
原middle.php内容
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>middle</title>
<style type="text/css">
<!--
body{margin:0px;}
-->
</style>
<script>
function switchSysBar(){
var locate=location.href.replace('middle.php?folder=<?php echo $folder;?>','');
var ssrc=document.all("img1").src.replace(locate,'');
if (ssrc=="images/main_55.gif"){
document.all("img1").src="images/main_55_1.gif";
document.all("frmTitle").style.display="none"
}else{
document.all("img1").src="images/main_55.gif";
document.all("frmTitle").style.display=""
}
}
</script>
</head>
<body style="overflow:hidden">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
<tr>
<td width="171" id=frmTitle noWrap name="fmTitle" align="center" valign="top">
<table width="171" height="100%" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
<tr>
<td bgcolor="#1873aa" style="width:6px;"></td>
<td width="165"><iframe name="I1" height="100%" width="165" src="<?php echo $folder;?>/left.php" border="0" frameborder="0" scrolling="auto">浏览器不支持嵌入式框架,或被配置为不显示嵌入式框架。</iframe></td>
</tr>
</table>
</td>
<td style="width:6px;" valign="middle" bgcolor="1873aa" οnclick="switchSysBar();"><SPAN title=关闭/打开左栏><img style="cursor:pointer;width:6px;height:40px;" src="images/main_55.gif" name="img1" width=6 height=40 id=img1></SPAN></td>
<td width="100%" align="center" valign="top"><iframe name="right" height="100%" width="100%" border="0" frameborder="0" src="<?php echo $folder;?>/index.php">浏览器不支持嵌入式框架,或被配置为不显示嵌入式框架。</iframe></td>
</tr>
</table>
</body>
</html>
解决办法是通过判断浏览器类型,如果是IE9,则通过jQuery在DOM加载结束或改变窗口大小的时候动态改变left.php所在iframe的容器table(id="a")的高度
更改后的middle.php内容
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript" type="text/JavaScript" src="js/jQuery1.6.2.js"></script>
<title>middle</title>
<style type="text/css">
<!--
body{margin:0px;}
.mian{text-align:center;width:1024px;margin:0 auto;}
-->
</style>
<script>
function changeHeight(){
$("#a").attr("height",document.documentElement.clientHeight);
}
window.οnresize=changeHeight;
$(document).ready(function(){
ieMode=document.documentMode;
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
var isIE7=isIE&&!isIE6&&!ieMode||ieMode==7;
var isIE8=isIE&&ieMode==8;
var isIE9=isIE&&ieMode==9;
if(isIE9) changeHeight();
});
function switchSysBar(){
var locate=location.href.replace('middle.php?folder=<?php echo $folder;?>','');
var ssrc=document.all("img1").src.replace(locate,'');
if (ssrc=="images/main_55.gif"){
document.all("img1").src="images/main_55_1.gif";
document.all("frmTitle").style.display="none"
}else{
document.all("img1").src="images/main_55.gif";
document.all("frmTitle").style.display=""
}
}
</script>
</head>
<body style="overflow:hidden">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
<tr>
<td width="171" id=frmTitle noWrap name="fmTitle" align="center" valign="top">
<table id=a width="171" height="100%" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
<tr>
<td bgcolor="#1873aa" style="width:6px;"></td>
<td width="165"><iframe name="I1" height="100%" width="165" src="<?php echo $folder;?>/left.php" border="0" frameborder="0" scrolling="auto">浏览器不支持嵌入式框架,或被配置为不显示嵌入式框架。</iframe></td>
</tr>
</table>
</td>
<td style="width:6px;" valign="middle" bgcolor="1873aa" οnclick="switchSysBar();"><SPAN title=关闭/打开左栏><img style="cursor:pointer;width:6px;height:40px;" src="images/main_55.gif" name="img1" width=6 height=40 id=img1></SPAN></td>
<td width="100%" align="center" valign="top"><iframe name="right" height="100%" width="100%" border="0" frameborder="0" src="<?php echo $folder;?>/index.php">浏览器不支持嵌入式框架,或被配置为不显示嵌入式框架。</iframe></td>
</tr>
</table>
</body>
</html>
JavaScript 判断 IE6/IE7/IE8/IE9
ieMode=document.documentMode;
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
var isIE7=isIE&&!isIE6&&!ieMode||ieMode==7;
var isIE8=isIE&&ieMode==8;
var isIE9=isIE&&ieMode==9;
if(isIE6){
alert("正在使用 IE6 浏览器");
};
if(isIE7){
alert("正在使用 IE7 浏览器,或者当前文档模式为 IE8");
};
if(isIE8){
alert("正在使用 IE8 浏览器,或者当前文档模式为 IE8")");
};
if(isIE9){
alert("正在使用 IE9 浏览器,或者当前文档模式为 IE9");
};
在 IE8 之后,IE 添加了 document.documentMode 属性,在 IE7/IE6 及以前的版本中该值都会返回 undefined。具体变化可以参考下表:
浏览器 | IE6 | IE7 | IE8 | IE8兼容性视图 | IE9 | IE9兼容性视图 |
documentMode | undefined | undefined | 8 | 7 | 9 | 7 |
在使用开发人员工具手动修改“文档模式”时,documentMode 的值也会跟着改变。
参考资料:http://msdn.microsoft.com/en-us/library/ie/cc196988(v=vs.85).aspx