IE CSS 버그-나는 어떻게 유지를 위치:절대 때 동적 자바 스크립트의 콘텐츠 페이지에서 변경
-
09-06-2019 - |
문제
내가 있는 페이지가 있는 열 그리고 콘텐츠 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
동적으로 로드되기 전에 렌더링을 수행합니다.이것은 또한 좋은 작품 firefox 에서는 항상.그러나,IE6 및 IE7 면 자바스크립트를 사용하여 내용을 변경(고,따라서 높이) #content
, 이미지 없이 더 이상 선지(#column
움직이지 않음).내가 사용하는 경우 IE Developer 바를 업데이트 div(말 추가 위치:절대 수동으로)이미지를 아래로 이동하고 줄다.
가 다 여기 있는가?
@Ricky-Hmm,즉,이 경우에는 해결책이 없다 나는 생각한다.에서 최고가 될 것입니다 jaggedy 대결 이후에만으로 콘텐츠를 확장하고 계약 등입니다.숨기기/표시 작동하지 않는 것으로 실용적이다.여전히 감사에 대한 응답과 최고의 솔루션입니다.
해결책
의 버그에서 렌더링 엔진입니다.나는 그것으로 실행하면 모든 시간입니다.하나의 잠재적인 방법으로 해결하는가를 숨기고 표시 div 을 변경할 때에는 콘텐츠(는 변경 높이):
var divCol = document.getElementById('column');
divCol.style.display = 'none';
divCol.style.display = 'block';
희망이 이런 충분히 빠르지 않는 눈에 띄:)
다른 팁
다른 해결 방법에는 나를 위해 일하고 있었다 깜박임 효과를 추가하고 제거하는 더미 CSS 클래스 이름을 다음과 같이 jQuery 사용:
$(element).toggleClass('damn-you-ie')
에 대해 걱정하는 경우를 받고 흔들림에서 표시 및 숨기기 divCol 할 수 있습험에 직 다른 css 산 및 그것은 동일한 영향을 미칠 것입니다 예:
var divCol = document.getElementById('column');
divCol.style.zoom = '1';
divCol.style.zoom = '';