Ext3在IE11和360浏览器中显示不兼容、排版混乱，但在火狐、谷歌和QQ中显示正常

博客探讨了Ext3框架在IE11和360浏览器中遇到的显示不兼容和排版混乱的问题，指出这些问题在火狐、谷歌和QQ浏览器中并未出现，表明该问题是特定浏览器的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在解决Ext在浏览器中兼容性的问题，在网上找了好多方法，比如使用

use strict

还有就是添加特定的<Meta>和删除掉<!DOCTYPE html>这部分的内容等，但都不能解决下面图示所出现的问题，第一次发帖，还望各位知道的大神告诉下我，谢谢各位大神

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/adsfw/taglibs.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>

<%@ include file="/adswf/engine/public/meta_wf.jsp"%>
<script type="text/javascript" src="${ctx}/resources/js/easyui/easycore.js"></script>
<script src="${ctx}/bdcdj4/xxcx/js/bdcdycxGrid.js" type="text/javascript"></script>
<script src="${ctx}/adsfw/public/export/excel/clientexcel.js" type="text/javascript"></script>
<script src="${ctx}/bdcdj4/xxcx/js/FwForExcel.js" type="text/javascript"></script>

<script type="text/javascript">
document.οnkeydοwn=function(e){  
        // 兼容FF和IE和Opera 
        var theEvent = e || window.event;  
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
        	summaryGrid.store.load();
        }
    }
var cx_flag = {
	cxFlag:'fwcx'//标识从哪个查询入口进来的,传递给xxcxGrid.js
};

Ext.onReady(function(){
	//查询
	var searchForm = new Ext.FormPanel({
		region: 'north',
		title: ' 房屋查询',
		iconCls: 'icon-xxcx-fwcx',
		labelAlign: 'right',
		height: 160,
		labelWidth: 70,
		frame: true,
		plain: true,
		collapsible: true,
		border: true,
		margins: '1 1 2 1',
		items: [{
			layout: 'column',
			items:[{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
					xtype: 'textfield',
					fieldLabel: '权利人姓名',
					name: 'qlr',
					anchor: '95%',
					emptyText:'+，表示与或'
				}]
			},{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
					xtype: 'textfield',
					fieldLabel: '身份证',
					name: 'zjh',
					anchor: '95%'
				}]
			}]
		},{
			layout: 'column',
			items:[{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
					xtype: 'textfield',
					fieldLabel: '不动产权证号',
					name: 'bdcqzh',
					anchor: '95%',
					emptyText:'+，表示与或'
				}]
			},{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
					xtype: 'textfield',
					fieldLabel: '不动产单元号',
					name: 'bdcdyh',
					anchor: '95%'
				}]
			}]
		},{
			layout: 'column',
			items:[{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
					 xtype: 'textfield',
					 fieldLabel: '业务号',
					 name: 'ywh',
					 anchor: '95%'
				}]
			},{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
					 xtype: 'textfield',
					 fieldLabel: '坐落',
					 name: 'zl',
					 anchor: '95%',
					 emptyText:'+，表示与或'
				}]
			}]
		},{
			layout: 'column',
			items:[{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
					    xtype: 'datefield',
						fieldLabel: '登记开始时间',
						format: 'Y-m-d',
			       	 	name: 'djkssj',
			       	 	id:'kssj',
       					anchor: '95%'
				}]
			},{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
						xtype: 'datefield',
						fieldLabel: '至',
						format: 'Y-m-d',
			       	 	name: 'djjssj',
			       	 	id:'jssj',
       					anchor: '95%',
       					listeners:{
       						'select': function(){
							      var kssj=Ext.getCmp('kssj').value;
							      var dt1 = new Date(kssj);//获取选择的时期对象
							      
		       					  var jssj=Ext.getCmp('jssj').value;
		       					  var dt2 = new Date(jssj);//获取选择的时期对象
		       					  
		       					  value1 = Date.parse(dt1); //Date.parse的处理很关键  
		                          value2 = Date.parse(dt2);
		       					  if(value1 > value2){
		       					  		Ext.getCmp('jssj').setValue('');
		       							Ext.Msg.alert('结果', '结束时间小于开始时间，请重新选择！');
		       					   }
							   } 
       					}
				}]
			},
			{
				columnWidth: .24,
				layout: 'hbox',
				defaults:{margins:'0 5 0 0'},
				items:[{
					xtype: 'button',
					text: ' 查询',
					width: 80,
					iconCls: 'icon-find',
					handler: function(){
						this.summaryGrid.store.load();
					},
					scope: this
				},{
					xtype: 'button',
					text: '清空',
					iconCls: 'icon-bdcdj-clear',
					width: 80,
					handler: function(){
						this.searchForm.form.reset();
						this.summaryGrid.store.load();
					},
					scope: this
				}]
			}]
		}]
	});
	this.searchForm = searchForm;
		
	var summaryGrid = new Ext.ux.grid.XxcxGrid({
		id: 'DZB_SUMMARY_GRID',
		region: 'center',
		margins: '0 1 1 1',
		url: this.ctx+'/bdcdj-xxcx!searchByfw.action',
		keyField: 'id',
		enableHandleTaskBtn: true,
		isSingleSelect:true,//多选框
		pageSize:15,
		isShowPrite:true,//是否显示房屋打印
		structure: [{  
			name: 'id',
			header:'id',
			hidden: true
		},{  
			name: 'djlb',
			header:'djlb',
			hidden: true
		},{  
			name: 'ywh',  
			header: '业务号',
			width: 140
		},{  
			name: 'qlr',  
			header: '权利人',
			width: 150
		},{  
			name: 'zjh',  
			header: '证件号',
			width: 220
		},{
			name: 'zl',  
			header: '坐落',
			width: 360,
			forceFit: true
		},{  
			name: 'bdcqzh',  
			header: '不动产权证号',
			width: 260
		},{  
			name: 'bdcdyh',  
			header: '不动产单元号',
			width: 260
		},{  
			name: 'djsj', 
			header: '登记时间',
			width: 120
		},{  
			name: 'latestZt', 
			header: '抵押、查封、异议、限制情况',
			width: 240
		}]
	});
	this.summaryGrid = summaryGrid;
	
	var viewport = new Ext.Viewport({
		layout: 'border',
		items: [searchForm, summaryGrid]
	});

	var store = summaryGrid.store;
	store.on('beforeload', function(){
		store.baseParams = {
			groupBy: store.groupField ? store.groupField : null,
			qlr:searchForm.form.findField('qlr').getValue(),
			zjh:searchForm.form.findField('zjh').getValue(),
			bdcqzh:searchForm.form.findField('bdcqzh').getValue(),
			bdcdyh:searchForm.form.findField('bdcdyh').getValue(),
			djkssj:searchForm.form.findField('djkssj').getValue(),
			djjssj:searchForm.form.findField('djjssj').getValue(),
			ywh:searchForm.form.findField('ywh').getValue(),
			zl:searchForm.form.findField('zl').getValue()
		};
	}, this);
});
</script>
</head>

<body>
</body>
</html>

如上图是运行的功能代码~