이 문서는 Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs를 이석진님께서 번역해 주신 것입니다. 감사합니다.
IE 6를 가장 잘 다루는 전략은 지원하는게 아니다.
잠시만. 좋아요, 당신이 느끼는 좌절감을 나도 느껴요. 당신은 개발자고, 당신은 IE6을 사용할 수 밖에 없기 때문에 머리털을 다 뽑고 싶을 정도로 괴로울 거에요. 그러나 열 받게도 IE6는 당신을 돕지 않을거에요. 당신이 몇 시간을 투자해도 레이아웃이 제대로 안 된다고 느낄거에요. 나도 고통을 느낄 수 있어요. 하지만 내가 도울 수 있어요.
내 말은 그냥 하는 호언장담도 아니고, IE6를 죽이기 위한 캠페인도 아니에요. 웹에는 이미 IE6가 충분히 넘치고, 무시하기엔 시장점유율이 너무 높아요. 이건 당신이 기대고 희망을 걸어야 할 자료들이에요.
난 이 자료들를 위해서 웹을 조사해 왔고, IE6를 직접 개선하기도 했어요. 그리고 지금은 이런 모든 것들을 IE6를 다루는 모든 사람들을 위한 자료로 사용하기 위해 컨닝페이퍼로 만들었어요. 대충 해킹한게 아니라, 각각의 버그에 깔끔하고 유효한 해결 방법을 제공하기 위해 최선을 다했어요. 난 각각의 케이스에 내가 했다는 일종의 증명(credit)을 부여하려고 노력했지만, 몇가지 솔루션은 너무나 많이 회자되서 원본을 알아보기 힘든 경우도 많았어요. 증명(Credit)이 없거나, 버그(bug)와 해결 방법(Fix)가 없으면, 내게 연락해요. 이 페이지를 업데이트 할께요.
이 거대한 IE6 가이드는 하나로 합쳐지는데 꽤 시간이 걸렸어요. 그러니, 괴로워 할 당신과 동료들이 북마크하고, 공유하고, 의견을 나누는 등 잘 사용했으면 해요.
전략
IE6의 버그와 해결 방법들에 대해서 이야기 하기 전에, 귀찮은 이슈들을 최소화하기 위한 몇 가지 전략들에 대해서 알아보는 것이 중요하다. 약간의 예방으로 앞으로 나올 사례(best practice)를 통해서 볼 많은 버그들을 다루는 것에 비해서 비용면에서 훨씬 효과를 볼 수 있다.
IE6 시장 점유율
시장 점유율에 따르면, 2009년 8월 현재, IE6의 사용자는 25.25%이다. 그러나 다른 자료들에 의하면 18.1% 정도로 낮게 나온 곳도 있다. 통계 수치는 다양하긴 하지만, 어쨌든 하락세를 보여준다. 그러나 정작 중요한 통계는 당신 자신의 수치다. 이미 당신의 사이트 트래픽을 분석했으면 알겠지만, IE6의 사용 수치가 당신 사이트를 개발하는데 도움이 되나? 비즈니스 용어로, IE6를 위한 개발하는 쪽과 IE6를 포기하는 쪽이 시간과 금전을 기준으로 비용/수익의 대비가 어떤가? 하락세의 IE6를 위한 사업 계획을 세울 수 있겠는가?
만약 대다수의 방문자가 IE6를 사용하지 않는다면, 그것을 위해 비용을 쓰면 안된다. 시간과 노력, 돈을 IE6의 문제를 해결하기 위해서 낭비하면 안된다.
디자인 계획을 세우고, 최대한 간단하게 하라
만약 당신이 미리 디자인 계획을 세우거나, 최선의 코딩 접근을 위해서 몇 분이라도 투자할 수 있다면, 당신은 잠재적인 레이아웃 문제를 피할 수 있다. 최고로 복잡한 비쥬얼 디자인도 간단한 코드 솔루션으로 만들어 낼 수 있다. 당신이 지나치게 많은 마크업을 사용하고 있다면, 당신이 다른 디자인 접근법을 사용해야 된다는 좋은 신호다.
당신의 경험이 늘어나고 다양한 레이아웃 이슈들을 해결해 갈수록, 당신의 결론과 해결했던 문제들에 대해서 잘 기록해놓아라. 장담하건데, 똑같은 문제에 또 부딪히고, 그러면 그전의 기록들이 시각 절약에 큰 도움이 될 것이다.
올바른 문서형(Doctype)을 사용해라
잘못된 Doctype은 골치아픈 상황의 시발이 될 것이고, 끊임없이 브라우저에 페이지를 뿌려주는데 문제가 생길 것이다. 오직 다음의 Doctype만을 사용할 것:
HTML 4.01 Strict
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Frameset
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML 4.01 Transitional
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Strict
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Frameset
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.0 Transitional
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.1
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
코드를 유효하게 작성해라
어떤 사람들은 사업적인 이유로 코드 유효성 검사를 해야 할 아무런 이유가 없다고 말하는데, 난 거기에 반대한다. 유효성 검사는 대부분의 경우 그렇게 어려운 것이 아니고, 단지 몇 분 정도만 걸릴 뿐이다. XHTML과 CSS의 유효성 검사를 위해 투자한 몇 분은 IE6뿐만 아니라, 모든 브라우저에서 득이 된다. 유효성 검사는 전방 호환성을 보장해주고, 유지보수를 줄여준다. 최소한, XHTML 마크업이라도 검사해라. 유효성 검사를 무시해도 되는 유일한 경우는, 브라우저에 CSS3의 몇몇 프라퍼티를 잘 활용하려는 경우 뿐이다.
표준을 따르는 브라우저를 먼저 개발하라
코드 유효성 검사를 하면, Firefox, Opera, Safari, Chrome 등과 같은 표준을 따르는 브라우저를 위한 개발을 먼저하고, IE6와 IE7같은 표준을 따르지 않는 브라우저를 위한 개발을 하게 되는 고통을 피할 수 있다. 왜나면, 표준을 따르는 브라우저는 거의 똑 같은 방식으로 모든 것을 렌더링 하기 때문에, 이후에 IE의 이상한 부분들에 대해서 따로 접근할 수 있을 것이다. 이런 작업 방식을 사용하는 것이 당신에게 탄탄한 바탕을 제공하기 때문에 나중에 코드를 수정하는데 도움이 된다. 만약 수정사항에 대해서 적절하게 레이블링을 했다면, 만약 그게 필요 없을 때 쉽게 제거할 수 있다.
점진적인 향상을 사용하라
점진적 향상이란 쉽게 말하면, 삐까뻔쩍한 기능들을 추가하기 전에 모든 사용자들에게 적용되는 기본적인 기능을 확실하게 만들어 놓는 것이다. 일반적으로 점진적인 확장은 자바스크립트 없이 웹 어플리케이션을 만들고, 후에 애니메이션, Ajax 효과 등을 위해 자바스크립트를 사용하는 것이다. 그러나 IE6를 언급 할 때는 CSS3(또는 CSS2의 많은 부분들), HTML5, 그리고 IE6를 지원하지 않는 다른 웹 프로토콜 등을 사용함에 있어서 점진적 향상 원칙을 적용할 수 있다.
어떤 경우에는 모든 브라우저에서 모든 사용자들에게 똑같은 경험을 제공할 수 없을 수도 있다. 특히 IE6에서는 그럴 것이다. 점진적 향상 전략은 사용자가 웹 사이트나 웹 어플리케이션을 사용할 때 최소한 필수적인 기능들을 사용할 수 있도록 보장해준다.
점진적 향상이 더 궁금하다면:
CSS를 초기화 해서 사용해라
브라우저들은 각각 기본 스타일 쉿을 가지고 있고 당연히 서로가 다르다. 당신의 스타일 쉿의 초기의 간단한 리셋 룰은 브라우저에 상관없는 코드를 쓸 때 오래 걸린다. 간단한거부터 자세한거 까지 인터넷에는 방대한 리셋 법칙이 있다.
간단한 CSS 초기화
- body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
인기 있는 CSS 초기화
자바스크립트 프레임워크를 사용해라
만약 당신의 웹에서 자바스크립트가 중요한 부분을 차지한다면, 자바스크립트 프레임워크를 사용해 보기를 권한다. 대부분의 프레임워크들이 IE6를 포함한 여러 브라우저에서 테스트되었고, 전부는 아니라도 많은 자바스크립트 이슈들을 자동으로 처리 할 것이다. 그리고 선택할 수 있는 자바스크립트 프레임워크들이 여럿 존재하는데 일반적으로 여기서 가능한 것은 저기서도 가능하다. 따라서 당신의 개인적인 문법 선호도에 따라서 선택하면 된다.
몇몇 유명한 프레임워크 목록:
물론 다른 많은 것들이 존재하고, 계속해서 새로운 것들이 나온다. 나중에 시간이 나면 전체 리스트도 한 번 만들어 보겠다. 당신이 자바스크립트에 대해서 자신만의 방법이 있다면, 개인적으로 MooTools을 강력히 추천한다. 당신이 초보라면 jQuery가 두 번째 추천이다.
IE를 위한 자바스크립트를 사용해라
인터넷에는 IE6를 표준 브라우저처럼 만들어주는 몇 몇 자바스크립트 솔루션이 떠 돌아 다닌다. 만약 당신의 IE 사용자들이 활성화된 자바스크립트를 사용하는 비율이 높다면, Dean Edward의 IE7 또는 유사한 Script를 사용하기를 권한다.
IE 디버깅 하는 법
IE는 디버깅 하기 어렵기로 악명 높지만, 개발자 입장에서 쉽게 만들어주는 많은 툴들이 존재한다. 이미 언급했듯이, 먼저 표준 브라우저를 위한 개발을 해라. Firebug와 WebDeveloper Toolbar는 둘다 Firefox의 훌륭한 부가 기능들이다. IE에 있는 많은 버그를 해결하는데 도움을 준다. 만약 다른 브라우저에서 Firebug의 힘을 쓰고 싶으면, http://getfirebug.com/lite.html Firebug lite가 브라우저의 북마크릿으로 사용될 수 있다.
IE의 많은 인스턴스를 테스트하기 위해서, 가상 머신을 까는거 말고 최선의 옵션은 IE Collection과IETester 이다. IETester는 개인 사용자는 공짜, 60일 이후의 상업적인 사용에는 라이선스가 필요한DebugBar도 플러그인으로 제공한다.
IE6 고립시키는 방법
IE6를 다루는 첫 번째 스텝은 IE6를 고립시켜서 IE6에 영향을 주는 그 어떤 변화들도 다른 브라우저에 영향을 끼치지 못하게 하는 것이다. IE6를 콕 집어내는 몇 가지의 방법이 있다. 조건부 주석 사용, CSS 선택기, 자바스크립트. 각각에 대해서 돌아가면서 살펴볼 것이다.
IE를 위한 조건부 주석 사용하기
마이크로소프트사는 다른 버전의 IE을 목표로 조건부 주석을 포함시켰다. 마크업, 자바스크립트, 자바스크립트 파일들, CSS, 외부 스타일시트를 포함하여 조건부 주석 안에 그 어떤 것도 삽입 할 수 있다. 조건부 주석을 사용하면 당신은 구체적인 버전의 IE를 집어내거나, 특정 버전 전,후의 어떤 버전이라도 집어낼 수 있다.
문법은 다음과 같다:
- <p>This message will appear in all browsers.</p>
- <p>This message will appear in all browsers.</p>
조건부 스타일시트를 사용하면 다른 방법에 비해서 몇 가지 장점이 있다. 스타일시트는 다른 스타일시트와 구분되고, 다른 브라우저에 영향을 주는 등의 혼란이 없다. IE6가 현저하게 시장점유율이 낮아진다면, 그 스타일시트를 제거하기만 하면 된다.
조건부 파일을 사용하는 유일한 단점은 그것들이 추가적인 HTTP 요청을 브라우저를 위해서 페이지에 추가한다는 것이다. 이것이 스타일시트를 사용하는 것과 비교하면 수용 가능한 거래(trade-off)이긴 하지만, 조건주 외부 자바스크립트 파일을 사용하는데는 반대한다. 왜냐하면 자바스크립트 파일은 마치 블록커(Blocker)처럼 행동하고, 그들이 완전하게 로드되기전에는 다른 파일들이 로드 되는 것을 막을 것이기 때문이다. 만약 당신이 외부 파일에 조건부 자바스크립트를 필요로 한다면, 그 브라우저를 목표로 하는 자바스크립트만을 사용하라.
CSS 선택자로 IE6 공략하기
만약 당신이 조건부 스타일시트를 원하지 않으면 CSS 선택자는 IE6를 타겟팅하기 위한 다른 선택이 될 수 있다. IE6는 자식 선택자를 지원하지 않는다. 당신은 먼저 IE6를 위한 CSS 선언문을 만들어야 하고, IE7이상과 다른 모든 현대적 브라우저에게 CSS 선언문 피드를 주기 위해 자식 선택자를 사용해야 한다.
먼저 HTML:
- <div>
- <p>Some Header Text Here</p>
- </div>
다음으로 CSS:
- .content {color:red;}
- div>p .content {color:blue;}
이 방법의 단점은 당신의 스타일시트를 지저분하게 만들 수 있다는 것이다. 따라서 주석들에 대한 명확한 기록(주석)을 남겨라. IE6를 위한 CSS 선언문은 다른 브라우저에 의해 검색되고 사용될 것이다. 따라서 자식 선택자 선언문 앞에 오는 것이 중요하다. 자식 선택자가 다른 선언문들을 재정의(override)하는 이유는 그것이 선언문에 높은 구체성을 부여하기 때문이다. IE6는 문법을 이해하지 못하므로, 그것을 무시한다. 그러나 다른 모든 브라우저는 그것을 처리 할 것이다.
더 읽어볼 것들:
IE6 탐지를 위해 자바스크립트 사용하는 법
만약 당신이 자바스크립트를 사용해서 IE6를 탐지하고 한다면 조건부 주석을 사용하지 말고, 다음의 방법을 이용하자:
- if(typeof document.body.style.maxHeight === "undefined") {
- alert('IE6 Detected');
- }
- if (Browser.Engine.trident4) {
- alert('IE6 Detected');
- }
- if (($.browser.msie) && ($.browser.version == "6.0")){
- alert('IE6 Detected');
- }
더 읽어볼 것들:
이미지
IE6는 당신이 빡빡한 스케쥴이거나, 특정 레이아웃 또는 디자인과 단단히 결합되어 있으면, Show-stopper가 되는 이미지들과 관련된 많은 문제들을 가지고 있다. 이런 고통을 덜기 위한 내용이 다음이다.
IE6에서의 반투명 PNG 문제 해결
IE6의 실망스런 여러 문제들 중에 하나는 바로 고화질 이미지를 위한 투명도를 지원하지 않는 것이다. 겹쳐지는 효과를 힘들게 만드는. 몇몇 자바스크립트 솔루션들이 있다. 아래 열거하겠지만 Twin Helix의 IE6 PNG Fix의 알파버전을 제외하고 어떤 것도 CSS를 사용하는 것을 허용하지 않는다.
가장 간단한 솔루션은 이미지를 알파 투명도가 활성화된 PNG8 파일로 저장하는 것이다. 만약 당신이 어도비 Fireworks를 사용하고 있다면, 다음과 같이 수행 할 수 있다. Save As > Save as type > FlattenedPNG > Options > Alpha Transparency 만약 당신이 어떤 형식의 그라데이션을 사용하고 있다면, 약간 더 질 좋은 그라데이션을 얻기 위해 Dither 체크박스를 선택할 수 있다. 알파 투명도로 PNG8으로 저장한 것은 이미지의 부분 투명도 역시 100% 투명도로 렌더링할 것이다. 다양한 투명도를 제공하지는 않는다.
다른 옵션으로 IE6만을 타켓으로 하는 CSS 스타일시트에 특정 IE의 Filter를 추가하는 것이다. 이 블로그에서 Aaron Baxter가 강좌를 통해서 설명해 줄 것이다.
자바스크립트 PNG 해결 방법들:
IE6에서 둥근 모서리 만들기
여기서 자세한 설명을 하는 대신에 CSS 둥근 모서리 메뉴에 대한 강좌를 참고하길 권한다. 여러 브라우저와 상관 없이 만들어 낼 수 있는 둥근 모서리 방법을 알려준다.
깜박이는 배경 이미지 문제 해결하는 방법
당신이 만약 링크와 버튼을 위해서 배경 이미지로 CSS를 사용하고 있다면 IE6에서 그 이미지가 일시적으로 깜빡이는 걸 느꼈을 것이다. 이유는 IE6는 적절하게 배경 이미지를 캐쉬하지 않고, 매번 새로 로드하기 때문이다. 한 줄의 자바스크립트로 IE6가 이미지를 캐쉬하도록 만들 수 있다.
- document.execCommand("BackgroundImageCache",false,true);
다른 해결 방법:
레이아웃
IE6의 레이아웃 버그는 가장 다루기 힘든 것 중에 하나다. 특히 IE6를 제외한 모든 브라우저에 잘 돌아가는 픽셀 단위의 완벽한 디자인을 목표로 하고 있다면 이 장에서는 그런 문제들에 대해서 살펴보겠다.
hasLayout의 이해
IE6의 많은 버그와 렌더링 오류는 MS의 hasLayout이라는 프라퍼티 개념 때문이다. 간단하게 말하면 hasLayout은 요소의 높이와 넓이에 특정 길이(dimensions)가 주어질 때 마다 발생한다. 이런 선언이 없으면 많은 오류가 생기게 되는 것이다.
hasLayout의 긴 선언문 대신에 나는 John Gallant와 Holly Bergevin의 언제, 어떻게 hasLayout을 다워야 하는지에 대한 주제를 다룬 훌륭한 강좌를 참고하기를 권한다.
더 읽어볼 것들:
IE6 박스 모델
IE6이 Quirks Mode로 작동하면 IE6는 구성요소의 전체 폭에 패딩과 보더도 없는 박스 모델을 그려낼 것이고 이것은 MS의 오래된 해석을 사용한 것이다. 이런 종류의 버그를 다루는 최선의 전략은 올바른 문서형(doctype)을 사용하여 Quirks Mode의 유발을 피하거나, 이미 보더나 패딩 프라퍼티로 적용된, 구성요소에 적용된 너비 속성(Properties)을 사용하지 않는 것이다. 조건부 주석 또한 사용할 수 있다. 그러나 마지막 방법으로 사용되어야 한다.
더 읽어볼 것들:
Min Height
IE6는 최소 높이 속성을 무시한다. 대신에 높이를 최소 높이로 취급한다. Dustin Diaz에게 감사의 인사를 전하자. !important 선언문을 통해서 문제가 해결했다. IE6는 그것을 오버라이드 할 것이지만 다른 브라우저들은 그렇지 않을 것이다. 이같은 방법으로 최소 폭을 해결할 수 있다.
- #container {min-height:200px; height:auto !important; height:200px;}
똑같은 효과를 얻기 위한 다른 방법:
- #container {min-height:200px; height:200px;}
- html>body #container { height:auto;}
Max Height
불행하게도, IE6에서 최대 높이 효과를 내는 방법은 스타일시트에서 자바스크립를 실행하는 것과 동일한 방법인, 특정 IE를 위한 CSS 표현을 사용하거나, 자바스크립트를 사용하는 것이다. 둘 중에, 나는 처리능력 면에서 비용이 많이 들고, 브라우저가 망가질 수도 있는 CSS 표현보다는 자바스크립트 방법을 추천한다. 둘 다 자바스크립트가 비활성화 되어 있으면 기능하지 않을 것이다. 모든 다른 브라우저들은 최대 높이를 지원하기 때문에, 이 솔루션은 오직 IE6만을 위한 것임을 명심해라.
JavaScript
- var container = document.getElementById('container');
- container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";
- function setMaxHeight(elementId, height){
- var container = document.getElementById(elementId);
- container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
- }
- setMaxHeight('container1', 200);
- setMaxHeight('container2', 500);
100% Height
IE6에서 구성요소가 100%의 높이를 갖기 위해서, 당신은 그 부모 요소의 수정 높이를 구체화 할 필요가 있다. 만약 당신이 그 요소를 페이지의 최대 길이로 만들고 싶다면 HTML과 BODY 요소 모두에 height:100% 을 적용해라.
- #parent {height:500px;}
- #child {height:100%;}
- html, body {height:100%;}
- #fullLength {height:100%;}
Min Width
IE6은 Max Height, Max Width와 마찬가지로 Min Width도 지원하지 않는다. 두 가지 해결책이 있다.추가 마크업을 적용하거나 자바스크립트를 사용하는 것이다.
JavaScript
- var container = document.getElementById('container');
- container.style.width = (container.clientWidth < width) ? "500px" : "auto";
- function setMinWidth(elementId, width){
- var container = document.getElementById(elementId);
- container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
- }
- setMinWidth('container1', 200);
- setMinWidth('container2', 500);
Max Width
최대 폭을 가능하게 하는 유일한 방법은 자바스크립트를 사용하는 것이다.
- var container = document.getElementById(elementId);
- container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
- function setMaxWidth(elementId, width){
- var container = document.getElementById(elementId);
- container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
- }
- setMaxWidth('container1', 200);
- setMaxWidth('container2', 500);
Double Margin Float Bug
IE6는 구성요소가 Floated 될 때, 동일한 쪽에 적용된 마진으로 floated된 구성요소의 마진이 부정확하게 두 배가 될 것이다. Steve Clason 은 간단히 구성요소에 display:inline 을 추가해서 해결했다.
- .floatedEl {float:left; margin-left:100px;}
- .floatedEl {float:left; margin-left:100px; display:inline;}
How To Clear Floats
당신이 만약 콘테이너를 써서 플롯된 요소를 감싸려고 할 때, 잘 감싸지지 않는다면, 둘 중에 한 가지 방법을 써라. 콘테이너의 높이 또는 폭 속성을 자동(auto)말고 수동으로 셋팅하거나, 또는 overflow 속성을 다음의 세 가지 값 중 하나로 추가해라: auto, hidden, scroll. Alex Walker가 처음으로 이 기법을 기록했고, Paul O’Brien에게 사용권을 주었다.
Sample HTML
- <div id="container">
- <div id="floated1"></div>
- <div id="floated2"></div>
- </div>
Sample CSS
- #container {border:1px solid #333; overflow:auto; height:100%;}
- #floated1 {float:left; height:300px; width:200px; background:#00F;}
- #floated2 {float:right; height:400px; width:200px; background:#F0F;}
더 읽어볼 것들:
Float Drops
Float drop 버그는 플롯된 콘테이너의 컨텐츠가 콘테이너의 폭을 초과할 때 생긴다. Firefox, IE7또는 다른 브라우저에서는 컨텐츠를 약간 잘라낸다. 그러나 IE6에서는 지정된 영역을 무시하고, 컨텐츠를 담기 위해 확장한다. 만약 어떤 구성요소가 컨테이너에 바로 옆에서 플롯되면, 그 구성요소는 컨테이너 아래로 떨어진다.
Float drop bug는 딱히 만족스런 해결책이 없는 IE6의 에러들 중 하나다. overflow:hidden; 이나 overflow:scroll 을 써서 겨우 해결은 할 수 있다. 그러나 hidden 값은 접근성 문제를 유발할 수 있고, scroll 값은 레이아웃을 망가뜨릴 수 있다. 자바스크립트 개선도 별로 유용하지 않다. 나의 최선의 제안은 수정된 레이아웃을 사용하거나, 컨텐츠의 크기에 많은 주의를 기울이는 방법밖에 없다.
더 읽어볼 것들:
The Guillotine Bug
길로틴 버그는 IE6(와 IE7)의 특히 골치아픈 버그다. 이 버그는 Floated 와 불분명한 구성요소가 마우스 오버 된 후에 non-floated 컨텐트와 다른 호버 스타일과 링크 될 때마다 컨테이너의 구성요소 보다 커질 때, 컨텐츠를 잘라내는 버그다. 어지러운가? 걱정하지 말라. 이 버그의 해결 방법은 Position Is Everything에 잘 문서화되어 있다.
버그를 유발하는 복잡한 원인에도 불구하고, 해결책은 간단한 편이다. 첫 번째 해결책은 컨테이너의 아래쪽에 추가적인 구성요소를 추가하고, 그 요소를 clear:both 로 셋팅하는 것이다. 두 번째는 길로틴 효과를 부르는 링크를 포함하는 구성요소에서 hasLayout 을 촉발시키는 것이다. 이것은 선언문에 height:1%; 을 추가 함으로써 간단히 해결할 수 있다.
더 읽어볼 것들:
1px Gap Bug For Absolutely-Positioned Elements
IE6(IE7에서는 수정됐다.)에서 이 에러는 라운딩 에러 때문에 발생한다. E6는 만약 부모 요소의 영역이 홀수 일 때, 절대 위치된 구성요소와 상대 위치된 부모 사이에 오른쪽 또는 아래쪽 가장자리에 1 픽셀의 간격을 포함할 것이다. 유일한 해결책은 부모 구성요소에 높이와 폭을 지정해주는 것이다. 안타깝지만, 유동 레이아웃을 위한 해결책은 없다. Paul O’Brien은 이 문제에 대해 자세한 설명을 덧붙였다.
3px Gap Float Bug
3픽셀 text jog bug라고도 불리는 이 버그는 IE6에서 텍스트가 플롯된 구성요소 바로 옆에 위치할 때 발생한다. IE6는 특별한 지정이 없어도 구성요소와 텍스트 사이에 3픽셀 마진을 추가 할 것이다. Stu Nichols 이 문제에 멋진 해결책을 제시한다.
IE And The z-index Property
만약 당신이 IE6나 IE7에서 위치지정된 구성요소들에 z-index를 사용한다면, 인덱스 스태킹은 0으로 셋팅 될 것이다. 이는 렌더링 에러를 유발한다. baker라는 사람이 말한 해결책은, 부모 요소에 더 높은 z-index를 주는 것이다. 어떤 경우에는 부모 요소가 position:relative 로 할당되어야 할지도 모른다.
더 읽어볼 것들:
Overflow Bug
Jonathan Snook은 overflow bug에 대한 글을 쓰고 해결했다. 이 버그는 overflow 속성이 부모가 있는 구성요소에 셋팅되고, 그 상대 위치의 자녀(구성요소)가 그것의 높이가 부모보다 클 때 발생한다. IE6와 IE7 모두에서 overflow 선언문을 따르는 대신에, 더 큰 자식 구성 요소가 부모를 흘러 넘칠 것이다. 해결책? 컨테이너에 position:relative 을 추가해라
목록
놀라울 것도 없이, IE에는 리스트에 영향을 주는 수많은 버그가 있다. 다음은 그들 버그와 해결책이다.
Horizontal List Item Width Problem
수평 방향의 메뉴를 구성하기 위해서 리스트 아이템들을 float하거나,
Staircase Bug
Staircase bug는 주로 네비게이션에 사용되는 수직 리스트를 만들려고 할 때,
- 의 컨텐츠가 Float 될 때 발생한다. 각 아이템들은 수직으로 쌓이거나, 계단형식으로 Float 될 것이다.해결책? 두가지 있다.
- 에 Float을 적용하거나,
- 구성요소에 display:inline 을 적용해라.
Vertical Spacing or Whitespace Bug
Block-level의 자식으로
- 구성요소를 가진 수직 리스트를 만들 때, IE6(IE7의 어떤 경우에)는 리스트 아이템 사이에 수직 공간을 첨가 할 것이다. 이 문제에 대한 복수의 해답이 있다. 먼저 예들을 보자.
Sample HTML
- <ul>
- <li><a href="#">Item 1</a></li>
- <li><a href="#">Item 2</a></li>
- <li><a href="#">Item 3</a></li>
- </ul>
Sample CSS
- ul {margin:0; padding:0; list-style:none;}
- li a {display:block; padding:0.5em; background:#ddd;}
The Fixes
Jon Hicks 는 Floating하고 리스트의 anchor tag을 clear하는 해결책을 제시했다.
- ul {margin:0; padding:0; list-style:none;}
- li a {display:block; padding:0.5em; background:#ddd; float:left; clear:left;}
다른 옵셥으로 anchor tag(또는 block-level 자식에)에 구체적인 높이 또는 폭을 지정함으로써 hasLayout 을 촉발해라.
- ul {margin:0; padding:0; list-style:none;}
- li a {display:block; padding:0.5em; background:#ddd; width:100%;}
동작
많은 시나리오들에 있듯이, IE6는 그것이 행동하는 방식에 문제들이 있다. 몇몇 작동 이슈들은 IE6가 오래 되서 그렇다. 왜냐면, 그것은 CSS2를 완벽하게 지원하지 않고, CSS3를 전혀 지원하지 않고, 또는 마소가 단순히 지적 재산권이 있는 표준을 따르기로 결정했기 때문이다.
IE6의 일반적인 동작 문제들을 좀더 살펴 보자.
No Hover State In IE6
href 속성을 갖고 있는 앵커(anchor) 태그, 또는 컨테이너 처럼 행동하는 앵커 태그를 위한 구성요소를 제외하면, IE6는 구성요소를 위한 Hover 상태를 지원하지 않는다. 이는 IE6에서 마우스오버 사용에 심각한 문제를 유발한다. 몇몇 방안들에 대해서 살펴보자.
최선은 미션에 중요한 기능을 수행하기 위해 hover 속성에 의존하지 않는 것이다. 대신에, 이미 기능적이고 접근가능한 피쳐들을 강조하고 확장하기 위해서 그것을 사용하는 것이다.
대부분의 해결책은 일반적으로 자바스크립트 프레임워크나 IE6 fix script를 통해서, MS의 지전 소유권이 있는 CSS 동작 속성을 사용하거나, JavaScript 솔루션을 쓰는 것이다.
Implementing The Canvas Tag In IE
IE7과 IE8을 포함한 그 어떤 버전에서도 HTML5 canvas 태그를 지원하지 않는다. 왜냐면, MS는 자신들이 만든 VML을 강요하기를 좋아하기 때문이다. 그러나, IE에서 canvas 태그를 흉내내기 위한 자바스크립트 솔루션들이 존재한다.
Canvas 해결과 자료들:
IE6 Resize Bug
Emil Stenstrom은 IE6의 크기 조절 버그의 솔루션을 발견했다. 기본적으로, body 요소가 중앙에 있고 레이아웃이 고정되어 있는 페이지에서, 그 안에 있는 상대 위치 구성요소들은, 만약 페이지가 리싸이즈(리프레쉬 말고)되면, 고정으로 될 것이다. Emil의 해결책은 간단하고 훌륭하다. Body에 position:relative 을 추가한다.
자바스크립트
IE6는 또한 자바스크립트를 해석하려고 할 때 무수한 에러로 시달린다. 난 그들 각각의 모든 IE6 자바스크립트 버그를 다룰 수 없다. 그러나 몇몇 일반적인 예를 다루고 어떻게 개선 할 수 있는지 알려주겠다.
Error: Expected Identifier, String, Or Number
IE는 제대로 구성되지 않은 자바스크립트를 잘 견디지 못하고, 배열이나 헤시(hash)의 마지막에 콤마가 붙은 경우, “Expected Identifier, String, Or Number” 라는 에러를 자주 뱉을 것이다. 다른 브라우저들은 좀 더 관대하다. 단지 콤마를 제거하면 그 오류는 사라질 것이다.
IE JavaScript Memory Leaks
IE는 그 자신의 메모리 관리자를 사용하기 때문에, 자바스크립트와 상호작용할 때 메모리 재요청에 실패하면 메모리 leak에 책임이 있다. Douglas Crockford는 IE에서 자바스크립트의 메모리 릭을 방지하는데 탁월한 해결책을 썼다. Hedger Wang이 쓴 다른 글은 필요 없다.
기타
이 장은 앞에서 분류한 내용에 꼭 들어맞지 않는 잡다한 IE6의 버그와 개선에 대한 것이다.
Duplicate Characters Bug
IE6가 Float된 구성요소 안의 display:none 으로 셋팅된 코멘트나 구성요소 같이 숨겨진 구성요소를 만나면, 문자들을 복사할 것이다. 그 문제는 Position is Everything에서 상세하게 다뤄졌다. 그러나 해결책은 간단한다. 숨겨진 구성요소에 선행하는 Float에 display:inline 을 적용해라.
Favicons in IE
Favicon은 Favorites Icon의 준말이다. 그것은 Favorite 폴더안의 북마크된 페이지의 옆에 있는 16*16 픽셀의 이미지를 가르킨다. 그것이 보이게 만드는 두 가지 방법이 있다. 하나는 단순히 이미지를 favison.ico라고 웹의 루트 디렉토리에 저장하는 것이다. IE와 다른 브라우저는 자동으로 이미지를 찾고 뿌려줄 것이다. 두 번째는 HTML 문서의 앞에(이미지를 업로딩 한 후) 다음의 코드를 삽입하는 것이다.
- <a href="http://december.com/html/4/element/link.html">link</a> rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
Favicon 이미지는 캐쉬되고, 브라우저의 캐쉬를 지우고 한번 이상 리프레쉬 하지 않는 이상 바뀌지 않는다. 자동 업데이트를 원하면, 이미지의 expires header를 셋팅해라.
더 읽어볼 것들:
GZip In IE6
XP SP2전의 몇몇 IE6 버전은 GZip 압축이 사용된 파일에서 문제가 있었다. 운좋게도, Seb Duggan은IE6 GZip bug의 해결책을 ISAPI Rewrite for Apache를 사용하여 발견했다.
Seb의 해결책은 ISAPI Rewrite installation 디렉토리 안의 httpd.conf 파일에 다음 코드를 삽입하는 것이다.
- RewriteEngine on
- RewriteCond %{HTTP:User-Agent} MSIE\ [56]
- RewriteCond %{HTTP:User-Agent} !SV1
- RewriteCond %{REQUEST_URI} \.(css|js)$
- RewriteHeader Accept-Encoding: .* $1
보너스 자료
문서의 길이가 좀 길긴 해도, 거의 모든 내용을 포괄했다. 당신이 찾는 것을 발견하지 못했다면, 다음의 추가 리소스를 확인해봐라.
출처 : http://www.clearboth.org/
