차림

2006년 9월 17일

불여우와 IE의 차이

html이나 xhtml로 웹 문서를 만들 때 불여우 1.5와 IE 6.0 사이에 몇 가지 다른 점이 있다. 그래서 두 브라우저에서 모두 똑같이 보이도록 하려면 주의해야 한다.

아래는 내가 경험하면서 골치를 썩다 알게 된 것으로 xhtml 1.0로 만든 문서를 불여우 1.5와 IE 6.0으로 봤을 때 기준. 사실 이 조건에서 두 번째 padding과 margin 문제는 생기지 않는다.

해상도

해상도를 1024*768로 했을 때, 기본 설정에서 가로 픽셀수가 다르다.

표 1. 가로 픽셀수
브라우저가로 픽셀수
불여우 1.51007px
IE 6.01004px

padding과 margin

불여우에서는 width와 padding과 border가 따로따로지만, IE에서는 width 안에 padding과 border가 들어간다. 예를 들어, div를 width: 300px; padding: 10px로 하면 다음과 같이 된다.

표 2. 여백 지정에 따른 div의 넓이
브라우저div 전체 넓이좌우 여백내용이 들어가는 부분의 넓이
불여우 1.5320px20px300px
IE 6.0300px20px280px

만약 여기에 border-width: 1px까지 넣으면, 불여우 1.5에서는 내용이 들어가는 부분의 넓이는 300px로 똑같지만 전체 넓이는 322px로 더 커지고, IE 6.0에서는 전체 넓이는 300px로 그대로지만 내용이 들어가는 부분의 넓이는 278px로 더 좁아진다. IE 6.0 이상 xhtml 문서에서는 이런 문제가 나타나지 않는다고도 한다. 어쨌거나 만약 div에 padding을 주어야 한다면 이런 문제를 피하기 위해선 div를 두 개 겹쳐 쓰고 한 div에 width를 지정하고 다른 div에 padding을 지정하면 된다. 아래처럼.


<style type="text/css">
<!--
#outer { width: 300px; }
#inner { padding: 10px; }
-->
</style>

<div id="outer">
<div id="inner">
내용
</div>
</div>

아니면 아예 둘러싸는 div에는 padding을 주지 말고 그 안에 들어가는 요소들, h1, h2, ..., p, ul, ... 이런 것들에 직접 상하좌우 여백을 주는 방법도 있다. 아래처럼.


<style type="text/css">
<!--
#outer { width: 300px; }
#outer h1 { padding: 2em 1em; }
#outer p { padding: 0 1em; } /* 좌우 여백만 줌 */ 
-->
</style>

<div id="outer">
<h1>제목</h1>
<p>내용</p>
</div>

ul과 block 설정을 이용한 메뉴 만들기

아래처럼 list를 써서 하이퍼링크로 연결된 li를 block으로 잡아 아래로 늘어지는 차림을 만들 때, 그러니까 ul을 써서 지금 이 문서 왼쪽에 있는 메뉴처럼 보이도록 할 때,


<div id="menu">
<ul>
<li><a href="menu1.html">메뉴 1</a></li>
<li><a href="menu2.html">메뉴 2</a></li>
<li><a href="menu3.html">메뉴 3</a></li>
</ul>
</div>

불여우 1.5에서는 #menu a { display: block; }와 #menu ul { list-style-type: none; } 만 기본으로 해 주면 되지만 IE 6.0에서는 이것 외에도 #menu li { display: inline; } 를 추가해야 한다. 그렇지 않으면 IE에서는 한 줄씩 건너띤 형태로 나온다.

글꼴 지정

다음과 같이 태그 속성에 글꼴을 여러 개 지정했다고 하자.


#outer p { font-family: Arial, 가는으뜸체; }

Arial에는 한글 글꼴이 따로 없으므로 불여우 1.5에서는 차례대로 영어와 숫자는 Arial로 나오고 한글은 가는으뜸체로 나온다. 하지만 IE 6.0에서는 영어와 숫자는 Arial로, 그리고 한글은 브라우저에 기본 글꼴로 지정되어 있는 글꼴, 예를 들어 굴림으로 나온다.

다시 말해 불여우에서는 앞에서 지정한 글꼴이 한글이나 한자 글꼴을 갖고 있지 않으면 차례대로 그 다음 글꼴로 넘어가면서 그 글꼴이 한글이나 한자 글꼴을 갖고 있으면 그걸로 보여준다. 하지만 IE에서는 맨 앞에 지정한 글꼴이 특정 언어에 대한 글꼴을 갖고 있지 않으면 글꼴에 따라서는 그 언어를 아예 제대로 보여주지 못할 수도 있다.

alt 속성

다음과 같이 <img> 태그에 alt 속성을 주었다고 하자.


<img src="./img/benzene.gif" alt="벤젠 화학식" />

IE에서는 그림이 뜨지 않을 경우 대신 그 자리에 '벤젠 화학식'이라는 글자가 보일 뿐만 아니라 그림이 보이는 경우에도 그림 위에 마우스를 올리면 '벤젠 화학식'이라는 표시가 뜬다. 하지만 불여우에서는 그림이 뜨지 않을 경우 대신 그 자리에 '벤젠 화학식'이라는 글자가 보이긴 하지만 그림이 보일 때는 그림 위에 마우스를 올려도 '벤젠 화학식'이라는 표시가 뜨진 않는다. 불여우에서 alt 속성은 그림이 뜨지 않을 때만 효과가 있다.

목록