jqueryui选项卡&；IE8 CSS崩溃_Jquery_Jquery Ui_Jquery Ui Tabs

jqueryui选项卡&；IE8 CSS崩溃

jquery jquery-ui

jqueryui选项卡&；IE8 CSS崩溃,jquery,jquery-ui,jquery-ui-tabs,Jquery,Jquery Ui,Jquery Ui Tabs,我创建了一个简单的网页。它包含一个jQuery选项卡，每个选项卡内都有一个updatePanel。这看起来是这样的：前两个字段是jQueryUI日期选择器，然后是dropdownlist和autocomplete，它们都正常工作，但当我单击submit按钮时，css被重新加载。这发生在IE8中。下面是我点击提交后的屏幕（我的表单压缩了大约20px）如果我删除了所有自定义样式，只留下jQuery ui css，这种情况也会发生看起来updatepanel以某种奇怪的方式刷新了css

我创建了一个简单的网页。它包含一个jQuery选项卡，每个选项卡内都有一个updatePanel。这看起来是这样的：

前两个字段是jQueryUI日期选择器，然后是dropdownlist和autocomplete，它们都正常工作，但当我单击submit按钮时，css被重新加载。这发生在IE8中。下面是我点击提交后的屏幕（我的表单压缩了大约20px）

如果我删除了所有自定义样式，只留下jQuery ui css，这种情况也会发生

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

不带自定义css的下视图：

在我将选项卡更改为第二个选项卡并返回所有内容后，看起来一切正常：

如何纠正这种奇怪的行为？我可以重写我的自定义css，这没有问题，但在我编写时，这是在默认的jQueryUICSS上发生的

编辑：以下是我的示例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>


Zrealizowana wysyłka seryjna i zarejestrowane zwroty
函数initDatePickerPL（）{
$.datepicker.regional['pl']={
closeText:“Zamknij”，
前文：“<；Poprzedni”，
下一个文本：“Następny>；”，
当前文本：“天国”，
月名：[“Styczeń”、“Luty”、“Marzec”、“Kwiecień”、“Maj”、“Czerwiec”、“Lipec”、“Sierpień”、“Wrzesień”、“Październik”、“Listopad”、“Grudzień”]，
Monthnameshort:[Sty'，Lu'，Mar'，Kw'，Maj'，Cze'，Lip'，Sie'，Wrz'，Pa'，Lis'，Gru']，
日名：['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']，
周刊头条：“Tydz”，
日期格式：'年-月-日'，
第一天：1，
isRTL：错，
showmont第三年：假，
年份后缀：“”
};
$.datepicker.setDefaults（$.datepicker.regional['pl']）；
}
函数initDatePickers（）{
//daty1
var dates1=$（“#dataOd1，#dataDo1”）。日期选择器({
变化月：对，
变化年：是的，
onSelect：函数（selectedDate）{
var option=this.id==“dataOd1”？“minDate”：“maxDate”，
实例=$（this）.data（“日期选择器”），
日期=$.datepicker.parseDate(
instance.settings.dateFormat | |$.datepicker._defaults.dateFormat，selectedDate，instance.settings）；
Date1.not（this）.datepicker（“选项”，选项，日期）；
}
});
//daty2
var dates2=$（“#dataOd2，#dataDo2”）.datepicker({
变化月：对，
变化年：是的，
onSelect：函数（selectedDate）{
var option=this.id==“dataOd2”？“minDate”：“maxDate”，
实例=$（this）.data（“日期选择器”），
日期=$.datepicker.parseDate(
instance.settings.dateFormat | |$.datepicker._defaults.dateFormat，selectedDate，instance.settings）；
dates2.not（this）.datepicker（“选项”，选项，日期）；
}
});
}
$（函数（）{
initDatePickerPL（）；
$（“#制表符”）.tabs（）；
$（“#radioset1”）.buttonset（）；
$（“#radioset2”）.buttonset（）；
$（“输入：按钮，输入：提交”）.button（）；
initDatePickers（）；
});




数据od：
迪亚ł
Wszystkie
杜克
DSD
圆点
兴奋剂
德威
数据来源：
格鲁帕：
Wszystkie
Z1
Z2
Z3
Z4
Z5
韦尔齐齐尔：
Wszyscy
P.R.E.S.C.O。
芬达斯
乌莫瓦·拉莫瓦：
韦特兰：
国际劳工组织
普罗坎托沃
数据od：
迪亚ł
Wszystkie
杜克
DSD
圆点
兴奋剂
德威