1
我有一个带有侧边栏和网格的2列布局页面。在IE9上无法正确显示边栏和标题
侧边栏包含过滤器,当用户单击过滤器时,发出ajax请求,并使用新数据更新网格(仅重新创建网格)。
每当用户单击过滤器时,侧边栏和标题都无法正确呈现(标题消失且侧栏部分可见),所有浏览器上都能正常工作,但在IE9上完美显示。
BEFORE:
AFTER:
我发现,调整窗口大小帮助,所以我写了,每一次改变窗口大小一个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>