在IE11中easyui中一键打开多个tags时页面不显示的问题

最近，在工作中遇到了一个前端的问题：点击按钮弹出五个tags页面，但是在IE10中，除了最右边的tags正常外，其余四个页面都出现了空白，但是这个问题在IE8上面是没有的；
实现步骤：1.使用for循环生成tag页面，代码大致如下：

for(var i = 0;i < 5;i++) {
//TODO 异步发送请求并生成tabs
}

2.异步发送请求并声称tabs代码大致如下

$cf.ajax({
url:XXX,
data:loginData,
onSuccess:function(data){
//TODO 生成TABS
}
});

3.生成tabs代码大致如下：

tabObj.tabs('add',{
id : id,
title : text,
selected: true,
closable :true,
content:'<iframe name="'+ text+ '" src="'+url+'" width="100%" height="900px" frameborder="0" scrolling="auth"></iframe>'
});

因为我工作环境升级浏览器非常麻烦，且本地启动基本不可能，所以只能先猜：
这个现象只在IE11或者谷歌最新版有，而在IE8或者谷歌老板浏览器上没有，所有我刚开始觉得应该是异步导致的，于是在请求里加入async:false,一测没有效果;接着我适用于按时，让请求一个一个来，还是不行，而且还会造成浏览器很卡。
后面我终于找到了一台可以测试的机器，于是我用开发者工具查看，发现请求返回都是没有问题的,所有问题只能是前端页面构建上了。
我查看页面各个节点的情况，发现页面不显示都是因为width和height为0导致，再看看代码这些节点定义的width都是为100%。

最终在网上找到了解决办法：
在tags页面的每一个出现iframe的地方网上找，第一个出现width:100或height:100%的div中后面加上data-option="fit:true"如下

<div class="easyui-tabs" style="width:100%;height:100%" data-option="fit:true">
<div style="width:100%;height:100%">
<iframe style="width:100%;height:100%"></iframe>
</div>
</div>

最后

以上就是直率手套为你收集整理的在IE11中easyui中一键打开多个tags时页面不显示的问题的全部内容，希望文章能够帮你解决在IE11中easyui中一键打开多个tags时页面不显示的问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。