2011-08-26 5 views
2

대부분의 경우 다른 콘텐츠를 올바르게 확장하지만 한 가지 시나리오의 콘텐츠 아래 펼쳐지는 javascript div로 문제를 디버깅하려고합니다. 문제는 디버깅을 시작할 위치를 알 수 없다는 것입니다.div 특정 서버의 IE 콘텐츠에서 확장됩니다.

배경으로, div는 ASP.NET의 타사 그리드 컨트롤을 통해 확장되어야합니다.

Firefox 5 또는 Chrome 13에서 배포 된 dev 서버에서 사이트를 탐색하거나 Visual Studio에서 로컬로 실행하면 div가 올바르게 확장됩니다. 사이트를 로컬에서 실행하는 IE8을 사용하면 효과가 제대로 확장됩니다. 그러나 배포 된 사이트에서 IE8을 사용하면 그리드 컨트롤 아래로 확장하는 div가 표시됩니다.

이것은 내 랩톱과 dev 서버의 차이점을 알려줍니다. 거기에서 나는 문제를 분리하고 그것을 정정하는 방법에 대해 분실했다.

#ColumnEffect 
{ 
    width: 249px; 
    height: 200px; 
    padding: 0.4em; 
    left:-1px; 
    top:20px; 
    position: absolute; 
    overflow: auto; 
    font-family:Calibri, Verdana, Tahoma; 
    font-size:10pt; 
    color:Black; 
    font-weight:normal; 
    text-decoration:none; 
    z-index:1; 
} 

그리고 붕괴/신축력을 트리거 JQuery와 :

여기
<div class="ColumnDiv"> 
    <span> 
     <asp:TextBox ID="ColumnTextBox" runat="server" CssClass="textbox">Show Columns</asp:TextBox> 
     <img id="ColumnArrow" src="<%= Page.ResolveUrl("~")%>images/DropDownArrow.jpg" style="margin-left: -22px; margin-bottom: -5px" /> 
     <asp:label id="RedAsterisk" style="color:Red; font-weight:bold;" runat="server">*</asp:label> 
    </span> 
    <div id="ColumnEffect" class="ui-widget-content" style="height: 145px !important;"> 
     <asp:CheckBoxList ID="ColumnChecks" runat="server"> 
     <asp:ListItem Text="Select All" Value="Select All" /> 
      <!-- Other list items --> 
     </asp:CheckBoxList> 
    </div> 
</div> 
<div>(Control resides here</div> 

연관된 CSS입니다 : 여기

내가 페이지에서 사용하고 코드입니다

function RunColumnEffect() { 
    if (!($('#ColumnEffect').is(":visible"))) 
    { 
     $("#ColumnEffect").show('blind', 200); 
    } 
    else 
    { 
     $("#ColumnEffect").hide('blind', 200); 
    } 
}; 

답변

3

IE8이 다른 "브라우저 모드"에서 "배포 된 사이트"를 표시해야하는 문제가 있어야합니다.

F12 키를 눌러 개발자 도구를 사용하여 어떤 모드가 사용되고 있는지 확인하십시오.

문제가 해결됩니다 <head> 안쪽이 추가 :이 문제를 해결했다

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
+0

을 - 대단히 감사합니다! – splatto