在IE9上無法正確顯示邊欄和標題

側邊欄包含過濾器，當用戶單擊過濾器時，發出ajax請求，並使用新數據更新網格（僅重新創建網格）。

每當用戶單擊過濾器時，側邊欄和標題都無法正確呈現（標題消失且側欄部分可見），所有瀏覽器上都能正常工作，但在IE9上完美顯示。

BEFORE：

enter image description here

AFTER：

enter image description here

我發現，調整窗口大小幫助，所以我寫了，每一次改變窗口大小一個js函數IE9上的用戶過濾器：

var isResized = false; 
//Solves a bug with IE rendering where the header dissappears after filtering 
function resizeWindow(){  
    if ($.browser.msie) 
    { 
     isResized = true; 
     window.resizeTo(window.outerWidth,window.outerHeight - 10); 
    } 
} 

//Solves a bug with IE rendering where the header dissappears after filtering 
$(window).resize(function(){ 
    try{ 
     //this will only be true if the resize was made by the script, if a user resized 
     //the browser this would e false and nothing will happen 
     if(isResized){ 
      isResized = false; 
      window.resizeTo(window.outerWidth,window.outerHeight + 10); 
     } 
    } 
    catch(err){} 
});

問題是它有時會工作，有時候不會。有沒有更好的辦法？是否有可能用JS重新渲染頁面？

側邊欄HTML片段：

<section> 
       <div id ="mySelections" class="selection"> 
        <h3> 
         <label I18N="MY_SELECTION"></label> 
         <span></span> 
        </h3> 
        <a href="#" id="clearAll" data-role="button" data-theme="g" I18N="CLEAR_ALL"></a> 
        <ul id="filterList"> 
         <li class="status"> 
         </li> 
         <li class="serviceFilter"> 

         </li> 
         <li class="favorites"> 

         </li> 
        </ul> 
        <!-- end .status --> 
       </div> 
       <!-- end .selection --> 
       <div class="contractsSummary"> 
        <h3 I18N="CONTRACTS_LIST_SERVICES_TITLE"></h3> 
        <div id="status" data-type="int" data-operator="eq" > 
         <p id ="red" class="filter"> 
          <label data-color="red" data-col="ServiceComplianceCurrentPeriod/Severity" data-val="1" I18N="STATUS_RED"></label> 
          <span class="circle red"></span> 
          <span class="quantity"></span> 
          <span class="percentage" ></span> 
         </p> 
         <p id = "yellow" class="filter"> 
          <label data-color="yellow" data-col="ServiceComplianceCurrentPeriod/Severity" data-val="2" I18N="STATUS_YELLOW"></label> 
          <span class="circle yellow"></span> 
          <span class="quantity"></span> 
          <span class="percentage"></span> 
         </p> 
         <p id="green" class="filter"> 
          <label data-color="green" data-col="ServiceComplianceCurrentPeriod/Severity" data-val="3" I18N="STATUS_GREEN"></label> 
          <span class="circle green"></span> 
          <span class="quantity"></span> 
          <span class="percentage"></span> 
         </p> 
         <!--<p id="all" class="filter"> 
          <label data-color="" data-col="" data-val="" I18N="ALL"></label> 
          <span></span> 
         </p>--> 
        </div> 
        <!-- end #status --> 
        <div id="favorites" data-type="favorite" data-operator="eq"> 
         <p class="filter"> 
          <label data-num="" data-col="Id" I18N="FAVORITES"></label> 
          <span></span> 
         </p> 
        </div> 
       </div> 
       <!-- end .contractsSummary --> 
       <div class="filters"> 
        <ul> 
         <li> 
          <div data-role="fieldcontain" class="textFilter" id="serviceFilter" data-col="Name" data-type="string" data-operator="eq" data-text="COLUMN_HEADER_SERVICE"> 
           <input placeholder="" data-type="search" class="filter" value="" I18N="FILTER_ITEMS" id="service-search"/> 
          </div> 
          <!-- end #textFilter --> 
         </li> 
        </ul> 
       </div> 
       <!-- end .filters --> 
      </section>

來源

2012-11-19 Tomer

發現它:)

所有我需要做的就是將其隱藏，然後再次顯示：

$('section').hide(); 
$('section').show();

來源

2012-11-19 09:24:02 Tomer

在IE9上無法正確顯示邊欄和標題

回答

相關問題