[CSS 크로스브라우징] 크롬과 사파리 테이블에서 col width %값 인식 버그 position:absolute 오류

[크로스브라우징 CSS] 크롬, 사파리 테이블 col width %값 인식 bug- position:absolute 오류

	

	콜 width % 오류 테스트
	
	
	
	
	
	
	
	

		

			
35%
			
25%
			
x%
			
5%
		
	
	

		

			
checker
			
checker
			
checker
			
checker
		
	

콜 width % 오류 테스트

  IE 6.0

 IE 8

사파리 브라우저

  크롬

위에 보다시피 파이어폭스,인터넷 익스플로러에서는 별 문제 없어 보이지만, 크롬 브라우저와 사파리브라우저에서는 %로 테이블 col width 값을 준 경우에 간격이 모두 똑같아 보이는 현상이 생긴다.

이럴 때 테이블 caption의 스타일에 position:absolute가 들어 있어서 생긴다. 그렇다고 absolute를 빼버리면 top:-9999를 처리할 수가 없고, 이게 처리가 안되면, caption이 보인다.

그렇다고 display:none을 할 수 없는 것은, display:none을 하면 간단하지만, 정작 저렇게 웹표준과 접근성을 따라서 코딩하는 의미인 장애인용 리더 프로그램이 캡션을 인식 하지 못한다.

따라서 크로스브라우징을 위해서는 다음과 같이 수정하는 것을 추천한다.

caption {visibility:hidden; overflow:hidden; width:0;height:0;font-size:0;line-height:0}

 IE 6.0

 IE 8

사파리 브라우저

 크롬