본문 바로가기
it backup

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

by 낯선.공간 2015. 7. 27.

목차

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

    
    콜 width % 오류 테스트
    
    
    
    
    콜 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

    사파리 브라우저

     크롬


    반응형