오늘만 IE관련 버그를 두번 포스팅한다.
사실 더 크리티컬한 이슈(Jscript 엔진)가 있는데..이건 일단 확인중이다. 그동안 ie8브라우져를 설치할 수가 없어서 사실 ie6, ie7과 다른 4개의 브라우져에서 이상이 없는것을 확인하고 당연 ie8에서는 문제가 없을거라 생각하고 체크를 해보지 않았는데... 금일 멀티부팅 작업하면서 비스타를 설치하고 부랴부랴 확인해보니..이건 왠걸... 생각지 못한 버그들이 나왔다.

도대체 IE8이 등장하면서 확실하게 표준을 준수하고 있는지 다소 의문이다. 왜냐면 기존 브라우져들 처럼 AcidTest2 만 통과되어도 사실 모든게 무난하게 동작이 되어야 하는게 정상이 아닌가싶다. 하지만 오히려 다른브라우져에서 다 실행되는 코드들 조차 IE8에서 문제가 되니... 이건 Acid2 통과를 위해 만들어진 눈가림이 아닌가 싶을정도로...때로는 실망이다.(물론 Acidt Test3에서는 22점으로 다른 브라우져들에 비해 최하점이지만..) 크로싱테스트에서 이상이 없던 곳들도 유독 ie8에서만 문제가 들어나는 곳들도 있으니...사실 Jscript 부분은 아직 더 확인을 해봐야 하는데... 향후 그부분이 확인되면 아마 마지막 리포팅이 될듯하다.

일단 이번 이슈는 블럭엘리먼트와 관련된 사항인데...상위 컨테이너가 inline-block으로 지정되어있을경우 포함된 하위 엘리먼트가 디폴트(block) 상태를 가질경우 그 하위컨텐츠를 display를 토글시킬때 이를 바로 갱신하지 못하는 이슈사항이다. 뭐 상식적으로 말이안되는것 같고... 정확하게 말하면 아예갱신을 못하는게 아니라... 변경된 사항을 redraw 해주지 못한다. 그러다가 다른 이벤트(프레임 사이즈조정이나 마우스이벤트)가 주어져서 화면갱신이 요청될때 그때 반영되게 된다. 다음 코드를 보자.


아주 간단한 코드이다.
뭐 크게 문제가 될것도 없어보이고... 검은색 부분을 눈여겨 보면된다.
         

이미지에서 보는것처럼 갱신이 되지 않다가 마우스를 클릭후 드래그 하면 그때 비로소 변경된 사항이 갱신된다.
현재 이부분은 ie6, ie7, ff, chrome, safari, opera에서 다 문제없이 실행되는 사항이니 확실히 ie8의 치명적 버그이다.

이 문제를 해결하는 방법은 4가지이다.

1. DTD를 제거한다.
2.상위엘리먼트와 같은 inline-block을 tree로 전부 상위에 모두 지정해준다.
3. 단, inline-block이 적용된 엘리먼트 하위에 div>div>div> 처럼 엄청난 div가 존재하고 마지막 엘리먼트가 위의 예시처럼 display
none/block으로 토글된다면 이때는 전부 상위 엘리먼트에 일일이  inline-block을 적용해줄수 없으므로  ie8에서 부터 지원되는 table 속성을 적용한다. 그러면 문제가 해결된다.


4.이 버그가 애시당초 변경된 사항에 대한 redraw 갱신이 제때 이루어지지 않아 발생한 것이므로 인위적으로 렌더러 조건을 발생시킨다. 이를테면 어떤 스크롤처리를 한다거나 마우스 이벤트를 발생시킨다거나 body 엘리먼트의 display속성을 해제후 다시 키면된다. 현재 나는 body 엘리먼트의 redraw로 이문제를 해결하였다.

아무튼 여간 골치아픈게 아니다.빠른시일내에 업데이트 되면서 패치되길 기대해 본다.