그러나 IE는 그 차이가 너무 크다. 더군다나 윈도우 버전에 따라서 사용되는 버전 또한 달라진다. 왜 일까? 다른 브라우저들은 대부분 윈도우 XP -7까지 모두 사용가능한데, IE 만큼은 윈도우 버전에 따라 골라서 사용해야 한다. 정말 쓰레기통에 버리고 싶은것이 IE이다. 왜 하나로 통합하지 않는것일까? 의구심만 커질뿐이다. 근래에는 오페라 브라우저가 놀라운 성장을 하고 있다. 특히나 모바일에서 독보적이라고 할만큼 유저를 확보하고 있는것 같다. IE는 버전에 따라 다른 결과물이 나오기때문에 hack(핵)을 적절하게 구현할수 있어야 한다. 이젠 머리보다는 기록을 남겨야 되는 나이가 되어서, 개인적인 필요에 따라서 한두가지씩 기록해 두려 한다. 1. IE6 에 자주 사용되는 언더바(_) CSS hack [code] .post-image { width: auto; } .post-image img { _width: 100%; } [/code] 이미지 넓이를 width:auto 로 하면 상위 레이어 크기에 따라서 자동으로 넓이를 일정하게 해준다. 그러나 IE6에서는 이미지가 큰경우 레이어를 벗어나 버린다. 그래서 위와 같이 img 에도 width를 해주어야 벗어나지 않는다. 언더바(_) 를 사용하는 경우는 IE6 이하버전에만 적용된다. 구글 크롬에서 작업을 주로 하다보니, 구글 크롬에서는 정상적으로 출력이 되었는데, IE9에서는 다른 결과가 나올때가 있었습니다. 그래서, IE9에 맞게 수정하면, IE9에서는 정상적으로 출력이 되는데, 구글 크롬에서는 잘못된 출력이 나오기도 합니다. 그러할때 사용하면 좋은 IE9 전용 CSS hack 입니다. 2. IE9 전용 CSS hack [code] :root #movie_slider li { position: absolute\9; top: 0; left: 0; } [/code] 문장 제일 앞에 :root 을 추가하고, position: absolute\9; 처럼 구문 뒤에 \9 을 붙이면 됩니다. 이렇게 하면 크롬과 IE9 모두 동일하게 출력이 됩니다. PXE Clio 1.0.3 작업을 하다가, 다른 부라우저는 모두 잘 나오는데, IE7 에서만 좌측 여백이 생긴것을 발견했다. 좌측 여백을 없애기 위해서, IE7 에서만 적용되는 CSS hack 을 사용해야 했다. 3. IE7 전용 CSS hack [code] *:first-child+html #promo_slide ul { margin-left: 0px; } [/code] 또는 *+html 을 사용해도 된다. 4. 긴문장이나 URL을 레이어 크기에 맞게 적당하게 자르기 [code] .ellipsis { width : 300px; white-space ;: nowrap; overflow : hidden; text-overflow : ellipsis; -webkit-text-overflow : ellipsis; -o-text-overflow : ellipsis; { [/code] 참고: 단어 단위로 자를때... word-wrap : break-word;