zoukankan      html  css  js  c++  java
  • 在 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:
    '菜单导航',
           
    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',
                   
    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" />

  • 相关阅读:
    “北斗人”梦想成真!星间链路新技术探索,ThingJS 3D 可视化 效果图
    如何从道路BIM模型中提取数据?分三步超简单!ThingJS 3D 可视化
    ThingJS: 做一个数据可视化项目的难点在什么地方?3D 可视化 three.js
    震撼来袭 | ThingJS 3D城市应用双11钜惠,低至688元>>官方优惠
    ThingJS 和three.js开发有何不同,让开发早点下班回家!3D 可视化
    NASA样本实验室之3D渲染图,和宇航员一样的上帝视角!3D 可视化 ThingJS
    三维建模国内外技术对比:和SketchUp、Revit建模软件相媲美 3D 地图 可视化 ThingJS
    CSS两列及三列自适应布局方法整理
    前端进阶-每日一练(3)
    前端进阶-每日一练(2)
  • 原文地址:https://www.cnblogs.com/soundcode/p/2181393.html
Copyright © 2011-2022 走看看