IE9으로 테이블 표시할 때 칸(Cell) 밀림 현상 해결

조건에 따라 테이블 형태의 데이터를 Ajax로 호출 해서 표출해주는 화면을 작성하였다.

웬만한 버그는 해결했다는 확신하에 페이지를 오픈 하였는데, 

IE9에서 많은 데이터를 뿌릴 때, 테이블에 중간에 간헐적으로 공백이 삽입되면서 테이블이 깨지는 문제가 발생하였다.

퍼블리싱 팀과 소스를 하나하나 뜯어보고, 변경해 보고 했지만 해결되지 않는,

데이터가 잘 못 되었는지 디버깅을 해보고 해봐도 해결되지 않는 이 문제는 

브라우저 문제였다고 잠정 결론 내렸다.

같은 문제를 해결해 놓은 다른 좋은 개발자들의 포스팅에 따라서.

감사합니다.

[ 문제 화면 ]

[그림1] 테이블 깨짐

[ 해결책 ]

Ajax로 호출되는 페이지 내에 다음 추가.

<script type="text/javascript">

$(document).ready(function(){ 

/** E9에서 내용이 많은 Big 테이블을 Ajax로 불러들일대 Cell이 한 칸씩 밀리는 버그가 있다. **/

if ( $.browser.msie ) {

   var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');

   $('#테이블_감싼_DIV').html( ($('#테이블_감싼_DIV').html() + "").replace(expr, '><')  );

}

});

</script>

[ 반영 후 운영 중 후기 2013년 03월 현재 ]

다른 브라우저보다

IE로 화면을 볼 때 로딩 속도가 느리다는 피드백.

[ 참고 ]

http://pangchan0.tistory.com/archive/20120601

http://finkle.tistory.com/90

http://stackoverflow.com/questions/7267014/ie9-table-has-random-rows-which-are-offset-at-random-columns