JQuery와 :

Question

필자는 FF, 크롬 등의 괜찮 IE에 문제가있어 선택 ATTR() 변화에 대한 IE 스타일링 오류/버그 ...

내가 예를 들어 2 열 레이아웃을 디버깅 필자에 대한 어떤의 왼쪽면을 비웠다. 오른쪽에는 정렬 가능한 옵션이있는 테이블에 긴 결과 목록이 있습니다.

이 정렬 가능한 옵션 섹션에는 동적으로 생성되는 옵션이있는 선택 상자가 있습니다. 업데이트를 통해 $ (this) .html (...)을 통해 내용을 잘 업데이트 할 수 있지만 attr() 사용 안 함 상태를 변경할 때 아래에 결과의 스타일을 나누기 ... 그것은 페이지 높이를 줄입니다. 결과 보여주기. 일종의 이미지 나 내용으로 왼쪽 열에 높이를 넣으면 왼쪽 열에있는 내용의 끝까지 높이가 떨어집니다.

오른쪽 열에있는 것이 무엇인지에 대한 감각을 상실한 것처럼 보이지만 실제로는 그 열에 실제로 무엇이 표시되지 않는지 어떤 이유로 다시 렌더링됩니다.

누구나 jQuery에서이 문제를 해결할 수있는 해결책이 있습니까? 아니면 IE의 CSS/HTML에서 해결 방법을 강요 할 수 있습니까? 완전히 아이디어 :(

그냥 몇 가지 코드를 업데이 트하고 밖으로 정말 성가신 메신저 :

HTML

<div id="ctn"><div id="ctn_wrp"><div id="ctn_cnt"> 
<div class="col_l180wrp"> 

<div class="lay_l"> 
<div class="col_l180hdr"></div> 

</div> 

<div class="lay_mr"> 

<div style="height:66px;margin:0px 0px 10px 0px;background:url(/images/search/bg-pp-search.gif) no-repeat top left;"> 
<div style="float:left;width:504px;height:66px;font-size:11px;"> 

<table cellpadding="4" cellspacing="4"> 
<tr style="font-size:11px;color:#FFF;font-weight:bold;"> 
<td>Manufacturer</td> 
<td>Model</td> 
<td>Network</td> 
<td>Phone cost</td> 

</tr> 
<tr> 
<td> 
<select id="manufacturer" name="manufacturer"> 
    <option value="">Any</option> 
    <option value="18">Apple</option> 
    <option value="8">Blackberry</option> 
    <option value="14">HTC</option> 
    <option value="5">LG</option> 
    <option value="2">Motorola</option> 
    <option value="1">Nokia</option> 
    <option value="15">O2</option> 
    <option value="3" selected="selected">Samsung</option> 
    <option value="24">Sonim</option> 
    <option value="4">Sony Ericsson</option> 
    <option value="19">Three</option> 
</select> 
</td> 

<td colspan="3"> 
    <select id="models" name="models" disabled="disabled"> 
    <option value="">Any</option> 
    </select> 
</td> 
</tr> 
</table> 

</div> 
<div style="float:left;width:246px;height:66px;"> 
<input type="image" src="/images/search/bt-compare.gif" id="submit_button" name="submit" value="Submit" alt="Submit" title="Submit" style="margin:8px 0px 0px 12px;" /> 
</div> 
<div class="sp"></div> 
</div> 

</form> 
<div class="sp"></div> 

<div class="split_l560"> 

<div id="results"> 


</div> 

</div> 

<div class="split_r180"> 
</div> 

</div> 
<div class="sp"></div> 

</div> 
<div class="col_l180ftr"></div> 
<script type="text/javascript"> 
var premanufacturer=3; 
var premodel=522; 
</script> 

</div></div></div> 

결과 테이블은 일반적으로 사업부 번호 결과에 갈 그러나 필자 것 그것을 밖으로 제거

레이아웃은 'layl'이되고 'lay_mr'이 오른쪽의 주된 하나 인 메인 왼쪽 열 (subnav)입니다. 상단에 검색 필터가 있고 그 아래에서 2로 분할됩니다. 그 중 왼쪽에 결과가 표시된 열 'layl'또는 'split_r180'에 위치하면 결과 표가 해당 두 열의 내용 높이에 표시됩니다. 현재 ive는 그들을 비게했다.

select # 모델에서 트리거/이벤트/실행이 발생할 때 중단됩니다. 이것은 jQuery에 의해 처리되고있다.

콜백을 수행 한 다음 .html을 사용하여 옵션을 업데이트하고 attr의 변경 사항에 도달하면 높이가 깨집니다.

$("select#models").html(options); 
$("select#models").attr("disabled",""); 

나는 기쁨도없이 removeAttr()을 시도했다. 정말 곤두박질! : -/내가 FF와 크롬으로 절대적으로 말한 것처럼! 전형적인 IE 어? : *)

도움 주셔서 감사합니다.

Answer 1

Ive는 작업을 두 배로 늘리는 방법으로 버그를 해결했습니다. 나는 hide()와 show()를 #results로 만들었고 IE는 그것을 다시 렌더링하고 높이를 다시 깨닫게한다. 짜증나지만 문제를 해결합니다 : -/