Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

I LOVE EJ

크롬, 사파리 테이블 col width %값 인식 bug- position:absolute 오류 본문

Web publishing/웹 표준

크롬, 사파리 테이블 col width %값 인식 bug- position:absolute 오류

BeOne 2013. 2. 27. 15:25
크롬, 사파리 테이블 col width %값 인식 bug- position:absolute 오류

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>콜 width % 오류 테스트</title>
</head>
<body>
<style>
* {font-size:12px; font-family:gulim;color:#666}
caption {position:absolute; margin-top:-99999px;*display:none;}
.tb_01 {border-top:1px solid #ccc; border-left:1px solid #ccc; width:500px; table-layout:fixed;}
.tb_01 th, .tb_01 td {height:22px; border-right:1px solid #ccc; border-bottom:1px solid #ccc}
.tb_01 th {background:#f7f7f7}
</style>   

<table boder="0" cellpadding="0" cellspacing="0" summary="col width test" class="tb_01">
<caption>콜 width % 오류 테스트</caption>
<colgroup>
<col style="width:35%" />
<col style="width:25%" />
<col />
<col style="width:5%" />
</colgroup>
<thead>
<tr>
<th>35%</th>
<th>25%</th>
<th>x%</th>
<th>5%</th>
</tr>
</thead>
<tbody>
<tr>
<td>checker</td>
<td>checker</td>
<td>checker</td>
<td>checker</td>
</tr>
</tbody>
</table>
</body>
</html>

 IE 6.0

 IE 8

위에 보다시피 파폭,IE에서는 문제 없이 보이지만, 크롬과 사파리에서는 %로 테이블 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

 IE 8



저작자표시

'Web publishing > 웹 표준' 카테고리의 다른 글

[IE6,IE7] vertical-align (IE6과 7버전 css핵을 사용한 DIV 내부 내용 세로 가운데 정렬)  (0) 2013.03.13
firefox에서 html validator 설치하고 확인하기  (0) 2013.03.05
ie6에서 png파일 투명하게 하기[DD_belatedPNG]  (0) 2011.09.22
IE6에서 select박스가 레이어 위로 나왔을경우  (0) 2011.09.07
li 공백 생기는 문제 해결 (이미지 있을경우)  (0) 2011.04.05
'Web publishing/웹 표준' Related Articles more