2009-10-20 1 views
1

은 여기 내 마크 업 (live repro)입니다 :div가 IE6에서 크기를 유지하지 못하게하려면 어떻게해야합니까?

<body> 
    <div style="text-align:center">header <input class='datepicker'/></div> 
    <table><tr><td>really wide table.....................</td></tr></table> 
</body> 

날짜 선택기가 활성화되면, 테이블 (더 큰)의 폭을 화면의 폭에서 헤더 DIV의 폭이 변경됩니다. 이로 인해 헤더의 가운데에있는 내용이 새로운 중심으로 이동합니다 ... 이는 매우 성가신 일입니다.

IE6에서는 발생하지만 FF3.5, IE8 또는 IE8 호환 모드에서는 발생하지 않습니다.

헤더 div의 너비를 내용이 아닌 너비로 고정하는 가장 좋은 방법은 무엇입니까?

참고 : 아마도 datepicker보다 훨씬 간단한 예제가있을 것입니다. 아마도 jQuery를 포함하지 않는 것일 것입니다. 그것은 저를 때리는 방아쇠 일 뿐이므로 그렇게 게시하고 있습니다. 이 문제를 일으키는 일없이 dom 요소를 추가하는 an example입니다.

답변

1

단순한 컨테이너 또는 CSS 지시문 조합이 저에게 효과적이지 않은 것 같습니다. 그 근본 원인보다 증상이 더 취급합니다 ...하지만 작동하는 것 같다 :

// set the header div's width in px on page load/window resize 
$(window).bind('load resize', function() { 
    $('#header').css('width', $(window).width() - 20 /* scrollbars */); 
}); 

이 확실히 덕트 테이프 솔루션입니다 : 여기에 내가 (나는 이미 내 스택에 jQuery를 가지고)하고 결국 무엇 잘하면 나는 더 나은 것들로 이동할 수 있습니다.

저는이 문제에 대한 순수한 CSS 솔루션이 있다고 확신합니다 ... 가지고 계시다면 게시하십시오!