해외에는 배울 수 있는 훌륭한 기사가 많아서 번역하는 데 시간을 투자하기로 했습니다. 이 기사를 번역한 사람이 있는지는 모르겠습니다. 원래 이름은 10 Awful IE Bugs and Fixes 입니다. 더 많은 사람들이 이 훌륭한 기사를 읽을 수 있기를 바랍니다. 외국인들이 워낙 유머러스해서 본문을 다 읽어봤습니다. 전문가들 우회로
다음은 번역입니다 :
나는 10가지 일반적인 IE 버그 와 그 해결책을 나열했습니다. 나는 이것이 IE에서 레이아웃 불일치를 디버깅하는 데 소요되는 시간을 줄이는 데 도움이 될 것이라고 믿습니다.
작가: 케빈
소개
IE를 다룰 때 모든 사람은 자신만의 이야기를 가지고 있습니다. 개발자로서 저는 IE의 많은 단점을 처리해야 하며 때로는 벽에 머리를 부딪히고 싶을 때도 있습니다. 하지만 시간이 지나면서 우리는 많은 것을 배웠고(때때로 그것은 우리 잘못이 아니라 IE의 잘못이었습니다!) IE의 이상한 행동을 받아들이고 이해하기 시작했습니다. 여전히 상당수의 IE6 사용자가 있기 때문에 이렇게 해야 합니다. 가장 좋은 방법은 처음부터 다양한 브라우저에서 웹사이트를 지속적으로 테스트하는 것입니다. 수천 줄의 HTML 및 CSS 코드를 작성한 후보다 처음부터 레이아웃 문제를 해결하는 것이 훨씬 쉽습니다.
IE6에 반대하는 움직임이 많으며, 대다수의 웹 전문가와 별 관심이 없는 일반 사용자들의 지지를 받고 있습니다. 이제 우리는 무엇을 할 수 있습니까? 우리는 IE6의 문제를 해결하기 위해 계속해서 파헤쳐야 했습니다. 그런데 잠깐만요, 흥미로운 소식이 있어요. w3cschool의 월간 보고서에 따르면 IE6 사용자 수가 지난 몇 년간 감소했습니다. 2006년 6월 60.3%에서 2009년 9월 13.6%로 증가했다. 이 비율대로라면 2010년 말까지 IE6을 버릴 수 있을 것 같습니다. (주석: 해외 상황은 정말 좋습니다~.~)
좋아, 현실로 돌아가서 나중에 참고할 수 있도록 이전에 겪었던 모든 문제의 목록을 만들었습니다. 나는 이것이 IE에서 레이아웃 불일치를 디버깅하는 데 소요되는 시간을 줄이는 데 도움이 될 것이라고 믿습니다.
1. IE6 고스트 텍스트(Ghost Text 버그)
이 글을 쓰기 전, 저는 이 버그를 만났습니다. 꽤 이상하고 재밌습니다. 갑자기 나타난 중복 텍스트가 IE6에서는 원본 텍스트와 가깝게 표시됩니다. (주석: 버그 데모를 보려면 Explorer 6 중복 문자 버그를 참조할 수도 있습니다.) 고칠 수가 없어서 검색해 보니 역시 또 다른 IE6 버그였습니다.
이에 대한 해결 방법은 많이 있지만 그 중 어느 것도 내 예에서는 효과가 없었습니다(사이트의 복잡성 때문에 일부는 사용할 수 없었습니다). 그래서 해킹을 사용했습니다. 원본 텍스트 뒤에 공백을 추가하면 문제가 해결되는 것 같습니다.
그러나 나는 Hippy Tech Blog 에서 이 문제의 원인이 html 주석 태그 때문이라는 것을 알게 되었습니다. IE6에서는 올바르게 렌더링할 수 없습니다. 그가 제안한 솔루션 목록은 다음과 같습니다.
해결책 :
2. 위치 상대 및 오버플로 숨김
나는 JQuery에 대한 튜토리얼을 준비할 때 내가 원하는 레이아웃을 달성하기 위해 숨겨진 오버플로를 많이 사용했기 때문에 이 문제에 여러 번 직면했습니다.
상위 요소의 오버플로가 숨김으로 설정되고 하위 요소가 위치:상대적으로 설정된 경우 문제가 발생합니다.
CSS-Trick에는 이 버그를 보여주는 훌륭한 예가 있습니다. 위치:Internet Explorer의 상대 및 오버플로
해결책 :
상위 요소에 위치:상대적;을 추가합니다.
3. IE의 최소 높이
간단합니다. IE는 min-height 속성을 무시합니다. 아래 해킹을 사용하여 문제를 해결할 수 있습니다. 더스틴 디아즈 에게 감사드립니다.
이 솔루션은 IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2에서 잘 작동합니다.
해결책 :
선택기 {
최소 높이:500px;
높이:자동 !중요;
높이:500px;
}