태그 보관물: border-collapse

IE8에서 border-collapse 사용 시 렌더링 문제

HTML에서 테이블을 사용할 때 border-spacingempty-cells 속성을 무시하고 테두리 디자인을 입히기 위해, CSS에서 border-collapse:collapse;를 사용하게 됩니다. 그런데 이게 IE8에서는 문제를 일으키네요.

보통의 경우에는 상관없으나, 테두리의 색상을 다르게 설정하는 경우에 아래 그림과 같이 세로 선이 가로선을 침범하여 테두리가 깨지게 됩니다. 다른 브라우저나 IE의 다른 버전에서는 이런 현상이 생기지 않으나, IE8에서만 문제가 됩니다.

해결 방법은 간단하게, 기본값인 border-collapse:seperate;를 사용하면 됩니다.