몇 주 전에 제 웹사이트의 메인화면 그림 밑에서 이상한 여백을 발견하였습니다. IE, Firefox, 그리고 Safari는 제대로 제 웹사이트를 보여주었지만, 이상하게도 크룸 브라우저는 그림들과 테이블 사이에 빈 공간을 보여주고 있었습니다.
[Open the code that shows the issue with Chrome]
[cellpadding] 과 [cellspacing] 요소를 이용하여, 그림과 각 테이블 셀들 사이의 공간을 0으로 설정하였고, 또 이미지의 외곽선 또한 0으로 설정하였기 때문에, 이 공간이 생길 이유는 없다고 생각했습니다.
<table width="200" height="150" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
<tr>
<td width="200" height="50">
<img border="0" src="cell1.jpg">
</td>
</tr>
....
</table>
며칠 동안 이 문제를 인터넷과 책을 통하여 조사해 보았지만, 유사한 사례는 있어도 정확한 원인을 찾을 수 없었습니다. 그래서 여러 가지로 테스트해보기로 하고, 일단 모든 CSS 코드를 제외한 HTML 코드로만 테스트했더니, 그 이상한 여백은 보이지 않았습니다. 이러한 이유로 어떤 CSS 코드가 이 문제를 발생한다고 생각하고 하나씩 테스트하여, “word-break:break-all;” 구문이 크롬 브라우저에 이 여백문제를 일으키고 있음을 알아내었습니다.
<STYLE TYPE='text/css'>
body {
word-break: break-all;
}
</STYLE>
그러나 그 원인을 알아도, 제 웹사이트에는 그 “word-break: break-all;” CSS 구문이 필요했기 때문에 문제를 바로 해결할 수는 없었습니다. 일단 제가 생각하는 원인은 크롬 브라우저가 <img>도 inline element이기 때문에 글자들과 같이 취급하여 “word-break: break-all;” 구문이 그림 뒤에 여백을 만들어 낸 것으로 생각하였습니다. 그래서 이 그림들을 “display: block;” 구문으로 block element 들로 설정하였더니, 그 이상한 여백들이 없어졌습니다.
<html>
<head>
<title>Example.2</title>
<STYLE TYPE='text/css'>
body {
word-break:break-all;
}
img.noSpace
{
display: block;
}
</STYLE>
</head>
<body>
<table width="200" height="150" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;">
<tr>
<td width="200" height="50">
<img class="noSpace" border="0" src="cell1.jpg">
</td>
......
</table>
</body>
</html>
[Open this code with Chrome]
간단한 해결책이지만, 몇 주 전에 갑자이 나타난 크롬브라우저 상의 여백은 참 당황스러웠습니다. 새삼 느끼는 것이지만, 모든 브라우저들 간 또 OS 사이에 정확한 표준이 확립되면 좋을 것 같습니다. 어려운 일이겠지만 말이죠. ^^
