실제로 홈페이지를 제작하시다가 격는 아주 머리아픈 경우입니다. 바로 인터넷 익스플로러, Internet Explorer, IE 에서 원래 CSS 에서 의도한대로 렌더링을 하지 않고 다르게 이해를 하는경우입니다. 많은경우 DIV가 깨지기도 하는데요, 이 이유와 해결책을 잠깐 보겠습니다.
보시다시피 CSS 에서 제작자가 의도한데로 width 를 정해놓지만 IE 에서 읽어들일때(IE 5.x 와 quirks 모드의 IE6)에는 그 width 안에 padding 값과 border 값이 같이 계산되어서 렌더링이 됩니다.
*quirk 모드 는 DOCTYPE 이 제대로 잡히지 않아 렌더링이 올바르게 되지 않는것을 일컫습니다. DOCTYPE 만 제대로 된다면 IE6도 렌더링은 제대로 되게 됩니다.
예를 들어보겠습니다.
<div id=”content”></div>
를 해 놓고 너비는 300px 에다가 padding-left 를 한 20px 로 주고 싶습니다.
그렇다면 보통의 CSS 렌더링은 너비 300px + padding값 20px 을 주니 총 너비는 320px 로 측정해야겠죠. 하지만 IE 에서는 너비값 300px 에다가 그 안에 padding값 20px 이 들어가니 총 너비는 그대로 300px 입니다. 그리고 그 안에 div는 작아졌겠죠. 280px 로 말입니다. 이것을 고치는 법은, CSS 를 핵 하는 법입니다. 계산을 거꾸로 해서 오히려 IE 에서는 너비를 320px 로 이해하게 만들면 20px 로 padding 을 주고 나머지 300px 은 div 내용이니 원래의 의도대로 렌더링을 해주니까요.
CSS Hacks and Filters 와 타 ALA 같은 CSS 페이지에서 설명해주고 있는 방법을 소개해 드립니다.
일단 원래의 CSS 코딩을 적습니다.
#content {
width: 300px;
padding-left: 20px;
}
그리고 다음줄에 IE 해킹을 넣습니다.
*html #content {
width: 320px;
/*padding은 안적어도 되는것이 위에서 이미 불러주었기때문에 괜찮습니다*/
}
이 해킹은 *html 을 붙임으로써 다른 브라우저는 인식을 못하고 IE 5.x 버전에서 이해를 하게 되는 부분입니다. 하지만 문제가 있습니다. 이 해킹은 모든 IE 브라우저에 적용이되면서 Mac 에서의 IE 5와 그 이상버전에게 적용이 되어버립니다. Mac 의 Internet Explorer 5와 그 이상, 그리고 IE 6는 은 원래가 CSS 의도대로 렌더링이 되거든요. 그럼 그 버전에서는 다시 깨지게 됩니다. 그러니, 위의 코딩에다 한줄을 더 넣어서 이렇게 넣습니다.
*html #content {
width: 320px;
w\idth: 300px;
}
w\idth 부분이 들어갔죠? 백슬래쉬\ 를 넣으므로써 고쳐질수 있습니다.
정리합니다. padding은 IE 5.x 안에서 다르게 인식되므로 약간의 해킹이 필요합니다. 그래서 예로 width: 300px 에 왼쪽 padding 이 20px 일 경우 이렇게 적습니다.
#content {
width: 300px;
padding-left: 20px;
}
* html #content {
width: 320px; /* IE 5.x 버전이 인식 그리고 mac IE, ie6도 인식 */
w\idth: 300px; /* Mac IE 와 IE6만이 다시 랜더링 */
}
border 도 IE 에서는 width 안에 포함되니 border 쓰실때에도 잘 크기를 조절하셔서 쓰시기 바랍니다.
height 을 Mac 의 IE 만 이해하게 하려면 width 는 w\idth 였듯이 he\ight 으로 쓰시면 됩니다.
------
출처 : http://ilmol.com/wp/2005/06/17/38/
