JQ Widgets和IE 9问题

Question

从过去的两天开始，我想知道为什么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>&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。有什么想法吗？

Answer 1

互联网上人潮涌动，人们在IE9上遇到JQuery / JQueryUI JQWidgets / HTML5问题。

您指定的Firefox和Chrome版本比IE9更加现代。在您能够使用更现代版本的IE之前，您可能会继续遇到问题。

Answer 2

当事情未正确初始化时，应该出现问题:)尤其是当您从不受支持的HTML元素创建窗口小部件时。我建议你在编写自己的代码之前学习和阅读。您的代码中的问题是您可以从期望DIV标记的TD标记创建小部件。