Jquery JQ小部件和IE 9问题

在过去的几天里，我一直在绞尽脑汁，想弄明白为什么当Firefox和Chrome上的一切都很完美的时候，Jqwidgets在IE9上看起来并不好

在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;
                    }
                }
            });

$（“#jqxToolBar”）.jqxToolBar({
工具：“自定义|下拉列表|自定义|下拉列表|自定义|按钮|按钮|自定义”，
initTools：函数（类型、索引、工具、菜单初始化）{
开关（索引）{
案例0：
追加工具（“选择级别：”）；
打破
案例1：
var-levelsource=；
jqxDropDownList（{width:200，source:levelsource，占位符：“Select…”）；
如果（菜单初始化===false）{
dropdownlist1=工具；
}否则{
dropdownlist1Min=工具；
}
打破
案例2：
附加工具（“选择：”）；
打破
工具。追加（“”）；
//工具。附加（“选择”）；
//dropdownlist1.add（dropdownlist1Min）.on（'select'，函数（事件）{
//附加（“选择”+事件.args.item.label+”）；
//            });
打破
案例3：
var resultsource=；
jqxDropDownList（{width:200，source:[]，占位符：“Select…”）；
如果（菜单初始化===false）{
dropdownlist2=工具；
}否则{
dropdownlist2Min=工具；
}
打破
案例4：
工具。追加（“”）；
打破
案例5：
jqxButton（{宽度：'80px'，模板：“success”}）；
工具文本（“应用过滤器”）；
工具。单击（函数（）{
if（dropdownlist1.jqxDropDownList（'getSelectedItem'）！=null）
{
if（dropdownlist2.jqxDropDownList（'getSelectedItem'）！=null）
{
var datafield=dropdownlist1.jqxDropDownList（'getSelectedItem'）。值；
交换机（数据字段）
{
案例“船舶”：
applyFilter（“opcenter”）；
打破
案例“项目”：
applyFilter（“项目名称”）；
打破
案例“区域”：
applyFilter（“地区”）；
打破
案例“客户”：
applyFilter（“客户”）；
打破
案例“海事经理”：
applyFilter（“maritimemanager”）；
打破
案例“全球”：
$（“#jqxgrid”）.jqxgrid（“clearfilters”）；
//$（“#jqxgrid”）.jqxgrid（{source:getAdapter（）}）；
打破
}
}
}
返回false；
});
打破
案例6：
jqxButton（{width:'80px'，template:'info}）；
工具文本（“清除过滤器”）；
工具。单击（函数（）{
$（“#jqxgrid”）.jqxgrid（“clearfilters”）；
//dropdownlist1.jqxDropDownList（{selectedIndex:-1}）；
//dropdownlist2.jqxDropDownList（{selectedIndex:-1}）；
返回false；
});
打破
案例7：
jqxListBox（{source:listSource，宽度：“100%”，高度：300，复选框：true}）；
如果（菜单初始化===false）{
列表框=工具；
}否则{
listboxMin=工具；
}
打破
}
}
});

我的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>&nbsp;</td>
                          <td id="jqxDateFilterWidget"></td>
                          <td>&nbsp;</td>
                          <td>&nbsp;</td>
                          <td>&nbsp;</td>
                          <td>&nbsp;</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。你知道为什么吗

---

互联网上充斥着对IE9上的JQuery/JQueryUI JQWidgets/HTML5有问题的人

弗尔