IE 5에서 깨지는 박스 모델 바로잡기

IE 5 에서 깨지는 박스 모델 바로잡기

조금 나쁜 소식이 있다. 5.5이하 버전의 인터넷 익스플로러는 폭과 높이 계산이 정확하지 않다. 다른 브라우저 들과 달리 익스플로러는 엘리먼트가 차지하는 실제영역을 margin, border, padding, width 의 합산값으로 할당하지 않는다. IE 5.5 이하 버전의 인터넷 익스플로러나 관용모드의 IE 6 에서는 margin 과 width 만이 계산된다. 이 들 브라우저에서는 padding 과 border 가 width 프로퍼티 값에 포함되므로 내용 영역이 다른 브라우저에 비해 줄어든다

만약 박스 넓이를 160px 로 잡는다고 가정하면 최근의 브라우저들은 10+10( 좌우 margin) + 100 ( width ) 로 총 120px 이 되어야한다. 그러나 윈도 IE 5.5 이하 버전에서 이 박스는 타 브라우저에 비해 40px 이 더 좁아 보인다. IE 5.5 버전에 할당된 실제 폭은 100(width) - 30(좌우 padding) -10(좌우border) 를 계산한 것과 같다. 이렇게 설정된 박스의 텍스트는 100px의 적당한 폭이 아닌 60px 의 폭안에 빽빽히 채워질 것이다. 이것은 height 프로퍼티에 대해서도 마찬가지 다. IE 5 는 height 값을 내용, 상하 padding, 상하 border 의 총합으로 취급한다. 따라서 IE 5 에서 박스의 높이는 다른 브라우저보다 낮아 보일것이다

이 문제를 해결하기 위한 여러가지 방법이 있다. 가장 일반적인 방법 중 일부는 다음과 같다

• width 나 height 프로퍼티를 포함하는 스타일에 padding 이나 border 를 사용하지 않는다. 그런 문제는 padding 이나 border 가 지정될 경우에만 발생하므로 이를 사용하지 않으면 아예 아무 문제도 발생하지 않는다. 그러나 만일 장식 테두리를 넣고 싶다면 border 프로퍼티 사용이 불가피하다.
• 두개의 태그를 사용한다. 하나는 width/height 를 지정한 태그이며, 또 하나는 padding 과 border 를 지정하려고 안에 포함시킨 태그이다. 폭이 100px 인 박스의 스타일 정의를 하려고 할때 거기에 border 와 padding 도 넣으려 한다면, 다음과 같이 작성한다.
• <div class = "pullquote">
• <div class = "inner_pullquote">
• This is the content of the pull quote
• </div>
• </div>

그러고 나서 스타일 시트에 다음 두개의 스타일을 추가한다.

• .pullquote { width : 100px;}
• .inner_pullquote
• {padding:10px;
• background-color:#333;
• border:1px dotted red;
• }

첫번째 스타일은 텍스트 박스를 감싸고 있는 부모 <div> 태그의 폭을 할당한다. Width 만 지정되었으므로 IE 5.5 를 포함한 모든 브라우저는 박스를 100px 의 폭으로 나타낼것이다. 하위 <div> 태그는 width 없이 padding 과 border 만 지정되었으므로, 여기서도 IE5 의 문제점은 발생하지 않는다. 이 방법을 사용하면 border 와 padding 을 사용하면서도 모든 브라우저에서 제대로 작동하게 할수 있지만, 단순히 사양 추세의 브라우저 하나를 지원하기 위해 추가적인 html 코딩과 별도의 <div> 태그를 사용하는 단점이 있다

IE 5 에 width/height 값을 다르게 준다. 즉 width 가 padding 과 border 를 포함해서 계산되는 것을 감안하여 원래 컨텐츠 넓이(100)이고 padding 30px, border 10px 이면 width 를 140px 을 주는것이다. 약간의 계산을 해야하지만 여러 웹 개발자들은 명쾌한 이 방법을 선호한다. 하나의 브라우저에만 CSS 프로퍼티와 값을 지정하 는 여러 방법이 있다. 가장 간단한 방법은 * html 을 이용하는 것이다.

• * html .pullquote
• {
• width:140px;
• w\idth:100px;
• }

원래 스타일에 있는 width 프로퍼티를 무효화 하므로, 이 스타일은 원래 있던 .pullquote 스타일 다음에 와야한다. 이 새로운 스타일은 IE 6 와 이전 버전을 제외한 모든 다른 브라우저에서 인식되지 않는다 ( IE 7 에서도 인식 되지 않음). 첫번째 프로퍼티는 width 를 140px( IE 5 이하버전을 위한것)로 지정하고 있으나 IE6 에서는 width를 100px 로 다시 지정해 주어야 한다 IE 6 에서는 박스모델이 원래 의도대로 정확히 처리되기 때문에 width를 140px 로 주면 의도와 다르게 표현되므로, IE 6 가 그 스타일을 원래 의도대로 표현할수 있도록 하기 위해서이다. 그게 바로 두번째 라인에 나오는 w\idth라는 특이한 프로퍼티다. 실제로 사용하고 있는 프로퍼티이긴 하지만 IE 6 에서만 인식된다. IE 5 이하 버전에서는 인식하지 못하고 무시한다. 따라서 IE 6 에서는 w\idth 가 width 프로퍼티를 100px 로 재 할당하므로 모든 브라우저에서 제대로 표현된다.