从过去的几天开始，我一直在努力找出为什么 Jqwidgets 在 IE9 上看起来不太好，而在 Firefox 和 Chrome 上一切都很完美。
在 Firefox（版本 34.0.1）上
在 Chrome 上（版本 40.0.2214.115）
在 IE 上（版本 9.0.8112）
工具栏看起来特别可怕，
$("#jqxToolBar").jqxToolBar({
tools: 'custom | dropdownlist | custom | dropdownlist | custom | button | button | custom',
initTools: function (type, index, tool, menuToolIninitialization) {
switch (index) {
case 0:
tool.append("<div style='font-weight: bold;padding: 3px;'>Select Level :</div>");
break;
case 1:
var levelsource = <Computed Value>;
tool.jqxDropDownList({ width: 200, source: levelsource, placeHolder: "Select..."});
if (menuToolIninitialization === false) {
dropdownlist1 = tool;
} else {
dropdownlist1Min = tool;
}
break;
case 2:
tool.append("<div style='font-weight: bold;padding: 3px;'>Select :</div>");
break;
tool.append("<div style='padding: 3px;'></div>");
// tool.append("<div style='font-weight: bold;'>Select</div>");
// dropdownlist1.add(dropdownlist1Min).on('select', function (event) {
// tool.append("<div style='font-weight: bold;'>Select "+event.args.item.label+"</div>");
// });
break;
case 3:
var resultsource = <Computed Value>;
tool.jqxDropDownList({ width: 200, source: [], placeHolder: "Select..."});
if (menuToolIninitialization === false) {
dropdownlist2 = tool;
} else {
dropdownlist2Min = tool;
}
break;
case 4:
tool.append("<div style='padding: 10px;'></div>");
break;
case 5:
tool.jqxButton({ width: '80px',template: "success"});
tool.text("Apply filter");
tool.click(function() {
if(dropdownlist1.jqxDropDownList('getSelectedItem')!=null )
{
if(dropdownlist2.jqxDropDownList('getSelectedItem')!=null )
{
var datafield= dropdownlist1.jqxDropDownList('getSelectedItem').value;
switch (datafield)
{
case "Vessel":
applyFilter("opcenter");
break;
case "Project":
applyFilter("project_name");
break;
case "Region":
applyFilter("region");
break;
case "Client":
applyFilter("client");
break;
case "Maritime Manager":
applyFilter("maritimemanager");
break;
case "Global":
$("#jqxgrid").jqxGrid('clearfilters');
// $("#jqxgrid").jqxGrid({ source: getAdapter() });
break;
}
}
}
return false;
});
break;
case 6:
tool.jqxButton({ width: '80px',template: "info"});
tool.text("Clear filter");
tool.click(function() {
$("#jqxgrid").jqxGrid('clearfilters');
//dropdownlist1.jqxDropDownList({ selectedIndex: -1 });
//dropdownlist2.jqxDropDownList({ selectedIndex: -1 });
return false;
});
break;
case 7:
tool.jqxListBox({source: listSource, width: '100%', height: 300, checkboxes: true });
if (menuToolIninitialization === false) {
listbox= tool;
} else {
listboxMin= tool;
}
break;
}
}
});
我的 html ,
<body class="default">
<table id='jqxWidget' border="0">
<tr>
<td>
<div id="jqxToolBar">
</div>
</td>
</tr>
<tr>
<td>
<div id='jqxExpander'>
<div>Date filter</div>
<div>
<table border="0" >
<tr>
<td><b>Start date : </b></td>
<td id="jqxStDtWidget"></td>
<td><b>End date :</b></td>
<td id="jqxEnDtWidget"></td>
<td> </td>
<td id="jqxDateFilterWidget"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input type="button" id='jqxApplyFilterButton' value="Apply filter" /></td>
<td><input type="button" id='jqxClearFilterButton' value="Clear filter" /></td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="float: left;" id="jqxgrid"></div>
</td>
</tr>
有人在 IE9 上遇到过这种奇怪的行为吗？
编辑：我测试过的另一件事是找出为什么 Firefox 和 Chrome 之间的日期选择器大小不同，并且在调查时发现在不同浏览器的同一个选择器上应用了不同的 css。有什么想法为什么？
