다음 그림은 웹 사이트 통계 시스템의 방문자 세부 정보의 브라우저 시청률을 보여주고 IE6은 40%이상을 차지합니다. 많은 유형의 브라우저가 있지만, IE만으로는 IE5.5, IE6, IE7, IE8 등과 같은 많은 버전이 있습니다. 이러한 많은 고급 버전 중에는 대부분의 사용자가 여전히 사랑 받기 때문에 입력 할 때 IE6은 IE6의 호환성 문제로 간주되지 않습니다. 그렇지 않으면 많은 방문자를 잃게됩니다.
IE6에서주의를 기울여야하는 10 가지 문제는 다음과 같습니다.
1. DocType를 사용하십시오HTML 페이지 상단에 DocType 유형을 추가해야합니다. 물론 엄격한 버전은 예를 들어 추천 할 가치가 있습니다.
<! doctype html public- // w3c // dtd html 4.01 // en
http://www.w3.org/tr/html4/strict.dtd>
또는, xhtml 페이지! doctype :
<! doctype html public- // w3c // dtd xhtml 1.0 엄격한 // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>
마지막으로보고 싶은 것은 IE6이 퀴크 모드로 들어간다는 것입니다. 실제로 충분한 기발함이 있습니다.
2. 위치 설정 : 상대위치 설정 : 특히 정렬을 설정할 때 상대적으로 둘 이상의 문제가 해결됩니다. 분명히, 당신이 이해해야 할 한 가지는 절대 포지셔닝이 비교적 말하고 있다는 것입니다. 어쩌면 설정이없고 모든 것이 그곳에 날아 갔다는 것을 모르기 때문일 수 있습니다. 예를 들어, 각 기사를 디자인하면 이전에 사진이 있으며 마지막으로 페이지에 사진이 하나만 있고 아마도 겹치는 사진이 있습니다.
3. 디스플레이 세트 : 부동 요소의 인라인 값이것은 유명한 IE6 Double Margin 버그에서 비롯됩니다. 예를 들어, div에 플로팅을 설계하고 왼쪽 왼쪽을 설정하는 경우 : 5px; 여기에서 디스플레이를 설정하십시오 : 플로팅 요소가 문제를 해결하기 위해 인라인.
4. 요소에 대한 HASLAYOUT 세트많은 IE6 (또는 IE7) 문제는 haslayout 값을 설정하여 해결할 수 있습니다. (Haslayout이 무엇인지 모른다면 여기를 참조하십시오)
요소에 대한 HASLAYOUT 값을 설정하는 가장 쉬운 방법은 CSS의 높이 또는 너비를 추가하는 것입니다 (물론 Zoom을 사용할 수도 있지만 CSS의 일부는 아닙니다). 특정 값을 설정하는 것이 권장되지만 때로는 높이가 반드시 의미하는 것은 아닙니다. 여기서는 높이를 사용할 수 있습니다 : 1%. 상위 요소가 높이를 설정하지 않으면 요소의 물리적 높이가 변하지 않지만 이미 Haslayout 속성이 있습니다.
5. 반복 된 캐릭터의 문제를 해결하십시오복잡한 레이아웃으로 인해 플로팅 요소 내부의 일부 텍스트가 정리 플로팅 위치 아래에 나타날 수 있습니다. 이것은 이상한 문제이며 다음은이를 해결하는 데 도움이 될 수 있습니다.
• 디스플레이를 확인하십시오 : 인라인은 부유 요소로 설정되어 있습니다.
• 플로팅 요소에서 마진 오른쪽 : -3px 사용;
• 플로팅 요소의 마지막 요소 뒤에 다음과 같은 댓글을 추가하십시오.
• 마지막 요소에 DIV를 추가합니다 (이것은 너비를 90% 또는 기타 유사한 높이로 설정하는 것입니다).
업데이트 : 가장 쉬운 방법은 모든 주석을 삭제하는 것입니다. (그녀의 팁에 대한 Tian Wei'er 덕분에 나는 그것을 직접 만나지 못했지만, Google을받은 후에는이 방법이 해결 될 수 있음을 발견했으며, 이것은 권장되는 방법입니다.)
위치에 대한 자세한 설명을 확인할 수 있습니다.
6. <a> 태그에서 호버를 사용하면 ie6은 <a> 태그 만 지원하여 호버 스타일을 표시합니다.
물론 JS를 통해이 방법을 여전히 해결할 수 있습니다. 그러나 이것은 접근성에 관한 것입니다. JS를 사용하여 구현 된 호버에서 중요한 컨텐츠를 설정하지 않는 것이 좋습니다.
7. IE 브라우저를 구별하기 위해 중요 또는 고급 선택기 사용예를 들어, Min-Height는 CSS를 사용하여 IE와의 호환성을 달성하지 못할 수 있습니다.
#요소 {
최소값 : 20em;
높이 : 자동! 중요;
높이 : 20em; /* IE6이 높이를 표시하자*/
}
IE6은 Min-Height를 정확하게 식별 할 수 없습니다. IE6이 20em으로 해결되도록 고정 높이를 설정할 수 있습니다. 그럼에도 불구하고 콘텐츠의 크기로 인해 높이가 변경됩니다. 또 다른 방법은 고급 선택기를 사용하는 것입니다.
#요소 {
최소값 : 20em;
높이 : 20em;
}
/ * IE6 무시 */
#Element [id] {
높이 : 자동;
}
8. 스케일링 크기를 피하십시오학부모 요소에 정확한 높이를 추가하지 않는 한 척도는 IE6을 혼동합니다. 그렇지 않으면 다른 사람들에게 중요합니다.
몸{
여백 : 2% 0! 중요;
여백 : 20px 0; /* IE6 읽기 가능*/
}
9. 가능한 빨리 테스트하고 자주 테스트하십시오레벨이 완료되지 않으면 조기 테스트하고 자주 테스트하는 것을 잊지 마십시오. 그렇지 않으면 IE6 문제를 해결하는 데 더 많은 시간을 소비 할 수 있습니다. 일반적으로 귀하의 웹 사이트가 IE6 및 Firefox에서 잘 수행 할 수 있다면 다른 브라우저에는 큰 문제가없는 것으로 추정됩니다.
10. 코드를 리팩터링하십시오많은 경우 문제를 해결하는 데 코드를 리팩토링하는 것보다 시간이 더 걸릴 수 있습니다.