IE CSS Bug - 위치 유지 방법 : 페이지의 동적 자바 스크립트 내용이 변경 될 때 절대적인

Question

나는 열과 내용 div가있는 페이지를 가지고 있는데, 다소 이렇게 :

<div id="container"> 
    <div id="content">blahblahblah</div> 
    <div id="column"> </div> 
</div> 

일부 스타일링에서는 열과 내용간에 나뉘어 있지만 동일한 세로 위치를 유지해야하는 이미지가 있습니다. 그래서 줄을 서서.

스타일링은 다음과 유사합니다.

#column 
{ 
    width:150px; 
    height:450px; 
    left:-150px; 
    bottom:-140px; 
    background:url(../images/image.png) no-repeat; 
    position:absolute; 
    z-index:1; 
} 

#container 
{ 
    background:transparent url(../images/container.png) no-repeat scroll left bottom; 
    position:relative; 
    width:100px; 
} 

이것은 #content의 내용이 렌더링 전에 동적으로로드 될 때 유용합니다. 이것은 또한 항상 파이어 폭스에서 잘 작동합니다. 그러나 IE6과 IE7에서 javascript를 사용하여 #content의 내용 (따라서 높이)을 변경하면 이미지가 더 이상 정렬되지 않습니다 (#column이 움직이지 않음). IE 개발자 막대를 사용하여 div를 업데이트하는 경우 (위치 추가 : 절대 수동) 이미지가 아래로 점프하고 다시 정렬됩니다.

여기에 누락 된 것이 있습니까?

@ 리키 - 흠,이 경우에는 내가 생각하는 해결책이 없다는 것을 의미합니다. 최선의 방법으로는 나중에 jaggedy matchup이 될 것이지만 내 콘텐츠가 확장되고 계약서 등을 숨기거나 보여주는 것이 실용적이지 않습니다. 최상의 솔루션으로 답변 해 주셔서 감사합니다.

Answer 1

렌더링 엔진에 버그가 있습니다. 나는 항상 그것에 뛰어 들다. 그것을 해결하는 한 가지 잠재적 인 방법은 (즉, 다시 높이를 변경) 숨기고 당신이 내용을 변경할 때마다 DIV를 표시하는 것입니다 희망이 충분히 빨리 발생

var divCol = document.getElementById('column'); 
divCol.style.display = 'none'; 
divCol.style.display = 'block'; 

이 :)

Answer 2

눈에 띄는 아니라고

깜박임 표시 및 숨기기 divCol에 대해 걱정하는 경우 다른 CSS 속성을 ajust 수 있으며 동일한 효과가 있습니다 예 :

var divCol = document.getElementById('column'); 
divCol.style.zoom = '1'; 
divCol.style.zoom = ''; 

Answer 3

나를 위해 일한 및 경경 효과를 추가하여 다음과 같이 더미 CSS 클래스 이름을 제거하기 위해 jQuery를 없었다 있었다 다른 해결 방법 :

$(element).toggleClass('damn-you-ie')