jquery - jQuery UI 选项卡和 IE8 CSS 崩溃

Question

我创建了一个简单的网页。它包含一个 jQuery 选项卡，每个选项卡内部都有一个 updatePanel。这看起来像这样：在此处输入图像描述

前 2 个字段是 jQueryUI 日期选择器，然后是下拉列表和自动完成，它们都可以正常工作，但是当我单击提交按钮时，css 会重新加载。这发生在 IE8 中。下面是我点击提交后的屏幕（我的表单被挤压了大约 20px）

如果我删除所有自定义样式并仅保留 jQuery ui css，也会发生这种情况。

看起来 updatepanel 以某种奇怪的方式刷新 css。

在此处输入图像描述

下面的视图没有自定义 css：在此处输入图像描述

在我将选项卡更改为第二个并返回后一切看起来都很好：在此处输入图像描述

如何解决这种奇怪的行为？我可以重写我的自定义 css，这没问题，但是当我写这件事时，这发生在默认的 jquery UI CSS 上。

编辑：这是我的示例 html 文件：

<!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>
     Zrealizowana wysyłka seryjna i zarejestrowane zwroty
  </title>
  <link type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/themes/dark-hive/jquery-ui.css" rel="stylesheet" />
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js "> </script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/jquery-ui.min.js"> </script>
  <script type="text/javascript" src="Skrypty.js"></script>
  <script type="text/javascript">
     function initDatePickerPL() {
         $.datepicker.regional['pl'] = {
             closeText: 'Zamknij',
             prevText: '&#x3c;Poprzedni',
             nextText: 'Następny&#x3e;',
             currentText: 'Dziś',
             monthNames: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
             monthNamesShort: ['Sty', 'Lu', 'Mar', 'Kw', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Pa', 'Lis', 'Gru'],
             dayNames: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
             dayNamesShort: ['Nie', 'Pn', 'Wt', 'Śr', 'Czw', 'Pt', 'So'],
             dayNamesMin: ['N', 'Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So'],
             weekHeader: 'Tydz',
             dateFormat: 'yy-mm-dd',
             firstDay: 1,
             isRTL: false,
             showMonthAfterYear: false,
             yearSuffix: ''
         };
         $.datepicker.setDefaults($.datepicker.regional['pl']);
     }

     function initDatePickers() {
         //daty1
         var dates1 = $("#dataOd1, #dataDo1").datepicker({
             changeMonth: true,
             changeYear: true,
             onSelect: function(selectedDate) {
                 var option = this.id == "dataOd1" ? "minDate" : "maxDate",
                     instance = $(this).data("datepicker"),
                     date = $.datepicker.parseDate(
                         instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                 dates1.not(this).datepicker("option", option, date);
             }
         });

         //daty2
         var dates2 = $("#dataOd2, #dataDo2").datepicker({
             changeMonth: true,
             changeYear: true,
             onSelect: function(selectedDate) {
                 var option = this.id == "dataOd2" ? "minDate" : "maxDate",
                     instance = $(this).data("datepicker"),
                     date = $.datepicker.parseDate(
                         instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                 dates2.not(this).datepicker("option", option, date);
             }
         });
     }

     $(function() {
         initDatePickerPL();
         $("#tabs").tabs();
         $("#radioset1").buttonset();
         $("#radioset2").buttonset();
         $("input:button, input:submit").button();
         initDatePickers();
     });
  </script>
  </head>
  <body class="myBody">
  <div style="margin: auto; width: 800px">
     <form name="ctl01" method="post" action="Default.aspx" id="ctl01">
        <div></div>
        </script>
        <div id="tabs">
           <ul>
              <li><a href="#tabs-1">Zrealizowana wysyłka</a></li>
              <li><a href="#tabs-2">Zarejestrowane wpłaty</a></li>
           </ul>
           <div id="tabs-1">
              <div id="panel1">
                 <table class="opcje">
                    <tr>
                       <td class="legenda">Data od:</td>
                       <td class="legenda">Dział:</td>
                    </tr>
                    <tr>
                       <td><input name="dataOd1" type="text" id="dataOd1" /></td>
                       <td>
                          <select name="dzial1" id="dzial1">
                             <option value="All">Wszystkie</option>
                             <option selected="selected" value="DOK">DOK</option>
                             <option value="DSD">DSD</option>
                             <option value="DOT">DOT</option>
                             <option value="DOP">DOP</option>
                             <option value="DWE">DWE</option>
                          </select>
                       </td>
                    </tr>
                    <tr>
                       <td class="legenda">Data do:</td>
                       <td class="legenda">Grupa:</td>
                    </tr>
                    <tr>
                       <td><input name="dataDo1" type="text" id="dataDo1" /></td>
                       <td>
                          <select name="grupa1" id="grupa1">
                             <option selected="selected" value="0">Wszystkie</option>
                             <option value="70">Z1</option>
                             <option value="58">Z2</option>
                             <option value="59">Z3</option>
                             <option value="60">Z4</option>
                             <option value="48">Z5</option>
                          </select>
                       </td>
                    </tr>
                    <tr>
                       <td class="legenda">Wierzyciel:</td>
                       <td></td>
                    </tr>
                    <tr>
                       <td>
                          <select name="wierzyciel1" id="wierzyciel1">
                             <option selected="selected" value="0">Wszyscy</option>
                             <option value="1">P.R.E.S.C.O.</option>
                             <option value="2">Fundusz</option>
                          </select>
                       </td>
                       <td></td>
                    </tr>
                    <tr>
                       <td class="legenda">Umowa ramowa:</td>
                       <td class="legenda">Wyświetlanie:</td>
                    </tr>
                    <tr>
                       <td>
                          <input name="umowa1" type="text" id="umowa1" /><input type="hidden" name="umowa_id1" id="umowa_id1" />
                       </td>
                       <td id="radioset1">
                          <input id="RadioButton1" type="radio" name="gr1" value="RadioButton1" checked="checked" /><label for="RadioButton1">Ilościowo</label>
                          <input id="RadioButton2" type="radio" name="gr1" value="RadioButton2" /><label for="RadioButton2">Procentowo</label>
                       </td>
                    </tr>
                    <tr>
                       <td></td>
                       <td class="guziki">
                          <input type="submit" name="odswiez1" value="Od&#347;wie&#380; dane" id="odswiez1" />
                          <input type="submit" name="eksportuj1" value="Eksportuj" id="eksportuj1" />
                       </td>
                    </tr>
                 </table>
              </div>
           </div>
           <div id="tabs-2">
              <div id="panel2">
                 <table class="opcje">
                    <tr>
                       <td class="legenda">Data od:</td>
                       <td class="legenda">Dział:</td>
                    </tr>
                    <tr>
                       <td><input name="dataOd2" type="text" id="dataOd2" /></td>
                       <td>
                          <select name="dzial2" id="dzial2">
                             <option value="All">Wszystkie</option>
                             <option selected="selected" value="DOK">DOK</option>
                             <option value="DSD">DSD</option>
                             <option value="DOT">DOT</option>
                             <option value="DOP">DOP</option>
                             <option value="DWE">DWE</option>
                          </select>
                       </td>
                    </tr>
                    <tr>
                       <td class="legenda">Data do:</td>
                       <td class="legenda">Grupa:</td>
                    </tr>
                    <tr>
                       <td><input name="dataDo2" type="text" id="dataDo2" /></td>
                       <td>
                          <select name="grupa2" id="grupa2">
                             <option selected="selected" value="0">Wszystkie</option>
                             <option value="70">Z1</option>
                             <option value="58">Z2</option>
                             <option value="59">Z3</option>
                             <option value="60">Z4</option>
                             <option value="48">Z5</option>
                          </select>
                       </td>
                    </tr>
                    <tr>
                       <td class="legenda">Wierzyciel:</td>
                       <td class="legenda">Operator (wpisz minimum 3 znaki):</td>
                    </tr>
                    <tr>
                       <td>
                          <select name="wierzyciel2" id="wierzyciel2">
                             <option selected="selected" value="0">Wszyscy</option>
                             <option value="1">P.R.E.S.C.O.</option>
                             <option value="2">Fundusz</option>
                          </select>
                       </td>
                       <td><input name="operator" type="text" id="operator" /><input type="hidden" name="operator_id" id="operator_id" /></td>
                    </tr>
                    <tr>
                       <td class="legenda">Umowa ramowa:</td>
                       <td class="legenda">Wyświetlanie:</td>
                    </tr>
                    <tr>
                       <td>
                          <input name="umowa2" type="text" id="umowa2" /><input type="hidden" name="umowa_id2" id="umowa_id2" />
                       </td>
                       <td id="radioset2">
                          <input id="RadioButton3" type="radio" name="gr2" value="RadioButton3" checked="checked" /><label for="RadioButton3">Ilościowo</label>
                          <input id="RadioButton4" type="radio" name="gr2" value="RadioButton4" /><label for="RadioButton4">Procentowo</label>
                       </td>
                    </tr>
                    <tr>
                       <td></td>
                       <td class="guziki">
                          <input type="submit" name="Button1" value="Od&#347;wie&#380; dane" id="Button1" />
                          <input type="submit" name="Button2" value="Eksportuj" id="Button2" />
                       </td>
                    </tr>
                 </table>
              </div>
           </div>
        </div>
     </form>
  </div>
 </body>
</html>

这里 jsfiddle 链接：http: //jsfiddle.net/353TE/

jquery - jQuery UI 选项卡和 IE8 CSS 崩溃

0 回答 0

Related

Reference