在 IE8 下 EXT的显示问题

简介:
在ie8下,点击左边的树形导航栏,在右面板中,弹出相对应的内容,这些内容都写在iframe中,但是在ie8下,需要随便在页面上点击一下鼠标,才能显示内容,换成Firefox和ie7,都能正常的显示,求各位高手解答。
这是部分代码
HTML code

 

 

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file ="/includes/jsp/init.jsp"%>
<!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>系统首页</title>

<!-- 引入基础的JS和CSS文件 -->
<%@ include file="/common/meta_ext.jsp"%>
<link href="/resources/css/index/index.css" rel="stylesheet" type="text/css"/>
<link href="/resources/css/index/index-treetab.css" rel="stylesheet" type="text/css"/>
<script src="/resources/js/index/index.js" type="text/javascript"></script>

<script src="/resources/js/ext/ux/Portal.js" type="text/javascript"></script>
<script src="/resources/js/ext/ux/PortalColumn.js" type="text/javascript"></script>
<script src="/resources/js/ext/ux/Portlet.js" type="text/javascript"></script>

<script src="/resources/js/ext/ux/TabCloseMenu.js" type="text/javascript"></script>
<script src="/resources/js/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var opername='<%= user.getOperName()%>';
Ext.onReady(
function(){
    Ext.QuickTips.init();
    
//定义页头
    var header =new Ext.Panel({
        border: 
false,
        layout: 
'anchor',
        region: 
'north',
        margins: 
'0 0 1 0',
        height: 
100,
        items: [{
            xtype: 
'box',
            el: 
'header',
            border: 
false,
            anchor: 
'none -1'
        }],
        bbar: [
            
'->','-',{
                xtype: 
'splitbutton',
                text: 
'当前用户:'+opername,
                iconCls: 
'icon-user-male',
                menu: [{
                    text:
'修改用户基本信息', handler:help
                },{
                    text:
'修改密码', handler:help
                }]
            },
'-',{
                text: 
'退出系统',
                iconCls: 
'icon-exit',
                handler: relogin
            },
'-']
    });
    
    
//定义树菜单控件
    var tree =new Ext.tree.TreePanel({
        useArrows: 
true,
        animate: 
true,
        enableDD: 
false,
        border: 
false,
        rootVisible: 
false,
        autoScroll: 
true,
        containerScroll: 
true,
        bodyStyle: 
'padding:3px',
        root: 
new Ext.tree.AsyncTreeNode({
            id: 
'-1',
            draggable: 
false,
            leaf: 
false
        }),
        loader: 
new Ext.tree.TreeLoader({
            dataUrl: 
'/extAction.do?task=getTreeJson',
            listeners: {
                
"beforeload"function(treeLoader, node){
                    treeLoader.baseParams.id 
= node.id;
                }
            }
        })
    });

    tree.on(
'click'function(node, e){
        
if(node.id !=-1&& node.attributes.url !=null){
            openUrl(node.attributes.url);
        }
else{
            tree.expandPath(node.getPath());
        }
    });
    tree.on(
'beforeexpandnode'function(node){
            
if(node.id!=-1&&node.getDepth()==1){
                tree.collapseAll();
            }
    });
    

    
//定义树菜单面板
    var treePanel =new Ext.Panel({
        region: 
'west',
        collapsible: 
true,
        autoScroll: 
true,
        split: 
true,
        iconCls: 
'icon-expand-all',
        title: 
'菜单导航',
        width: 
220,
        maxWidth: 
300,
        minWidth: 
220,
        margins: 
'0 0 3 5',
        items: tree
    });
    
    
    
    
//定义主界面整体布局
    var viewPort =new Ext.Viewport({
        layout: 
'border',            
        items: [header, treePanel, 
new Ext.Panel({
                id:
'main_panel',
                region: 
'center',
                width:
400
                contentEl:
'con'     

                })]
    });
     
});

function openUrl(url){
       
if(url!=null){
        document.getElementById(
'misFrame').src = url;
       }
}
    
    
</script>

</head>
<body>
    
<div id="header" style="background-image:url(/resources/images/background/header6.jpg);background-repeat: repeat-x;">
        
<img   src="/resources/images/background/toplf5.jpg"/>
    
</div>
    
<div id="con" style="height:100%;">
        
<iframe src="http://www.baidu.com" id="misFrame"  name="misFrame" width="100%" height="100%" frameborder="0"></iframe>
       
</div>
</body>
</html>

 

============================================================================

答案:

在<head>中间加一句<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />



本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/archive/2011/09/19/2181393.html,如需转载请自行联系原作者

目录
相关文章
|
Web App开发 JavaScript 前端开发
|
Web App开发 前端开发 JavaScript
|
4月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
7月前
|
Web App开发 XML 开发框架
技术心得记录:在IE浏览器中的奇怪页面表现
技术心得记录:在IE浏览器中的奇怪页面表现
75 0
|
3月前
|
JavaScript 前端开发
|
5月前
|
JavaScript
VUE——如何兼容IE9|IE10|IE11浏览器
VUE——如何兼容IE9|IE10|IE11浏览器
174 0
VUE——如何兼容IE9|IE10|IE11浏览器
|
6月前
|
安全 网络安全
用IE浏览器访问网站提示证书错误
当你在Internet Explorer中遇到证书错误提示,通常是因网站SSL/TLS证书问题或浏览器安全设置需调整。解决方法包括: 检查时间设置 调整IE设置 安装证书 调整计算机时间
150 3
|
7月前
win10取消ie浏览器自动跳转edge浏览器
win10取消ie浏览器自动跳转edge浏览器
203 4
|
Web App开发 XML 编解码
IE浏览器下载文件中文文件名乱码问题解决
IE浏览器下载文件中文文件名乱码问题解决
149 0
|
8月前
|
存储 机器人
在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
【2月更文挑战第28天】在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
148 1