IE6-BUG-CSS 호환성 상세 정보

1. IE6 배경 깜박임
링크, 단추를 CSS sprites로 배경으로 하면 IE6에서 배경그림이 깜빡이는 현상을 발견할 수 있습니다.이 원인은 IE6가 배경 그림 캐시를 사용하지 않았기 때문에 hover를 터치할 때마다 다시 불러옵니다. 자바스크립트로 IE6 캐시를 설정할 수 있습니다.

document.execCommand(“BackgroundImageCache”,false,true);

2. 최소 높이
IE6는min-height 속성을 지원하지 않지만,height가 최소 높이라고 생각합니다.해결 방법: i6는 지원하지 않지만 나머지 브라우저가 지원하는 속성을 사용합니다!important.

#container {min-height:200px; height:auto !important; height:200px;}

3. 최대 높이

//    ID          

var container = document.getElementByIdx_x(‘container’); container.style.height = (container.scrollHeight > 199) ? “200px” : “auto”; //       

function setMaxHeight(elementId, height){ var container = document.getElementByIdx_x(elementId); container.style.height = (container.scrollHeight > (height – 1)) ? height + “px” : “auto”; } //    

setMaxHeight(‘container1′, 200); setMaxHeight(‘container2′, 500);

4. 100% 높이
IE6에서 원소에 100% 높이를 정의하려면 부급 원소의 높이를 명확하게 정의해야 한다. 원소에 전체 화면의 높이를 정의하려면 html과 바디에 Height:100%를 정의해야 한다.
5. 최소 너비
max-height와 max-width와 마찬가지로 IE6도min-width를 지원하지 않습니다.

//    ID          

var container = document.getElementByIdx_x(‘container’); container.style.width = (container.clientWidth < width) ? “500px” : “auto”; //       

function setMinWidth(elementId, width){ var container = document.getElementByIdx_x(elementId); container.style.width = (container.clientWidth < width) ? width + “px” : “auto”; } //    

setMinWidth(‘container1′, 200); setMinWidth(‘container2′, 500);

6. 최대 너비

//    ID          

var container = document.getElementByIdx_x(elementId); container.style.width = (container.clientWidth > (width – 1)) ? width + “px” : “auto”; //       

function setMaxWidth(elementId, width){ var container = document.getElementByIdx_x(elementId); container.style.width = (container.clientWidth > (width – 1)) ? width + “px” : “auto”; } //    

setMaxWidth(‘container1′, 200); setMaxWidth(‘container2′, 500);

7. 쌍무 거리 버그
원소가 부동할 때, IE6는 부동 방향의margin 값을 두 배로 잘못 계산합니다.개인적으로 좋은 해결 방법은 플로트와 마린이 동시에 사용하는 것을 피하는 것이다.
8. 부동 제거
부동 요소를 div (또는 다른 용기) 로 감싸고 싶다면, 부동 요소를 엄격하게 감싸려면 div (용기) 에 명확한 하이라이트, width, 오버플로우의 속성 (auto 값 제외) 을 정의해야 한다는 것을 알게 될 것이다.

#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;}

9. 부동층 오차
내용이 하청 용기의 정의 폭을 초과할 때 IE6에서 용기는 정의된width값을 무시하고, 폭은 내용의 폭이 증가함에 따라 잘못 증가합니다.
부동층 오차 문제는IE6에서 진정으로 만족스러운 해결 방법이 없다. 비록 오버플로우:hidden을 사용할 수 있지만;또는 오버플로우:scroll;수정하지만 하이든은 다른 문제를 초래하기 쉬우므로 스크롤은 디자인을 파괴할 수 있다.JavaScript도 이 문제를 잘 해결할 수 없다.따라서 반드시 레이아웃에서 이 문제가 발생하지 않도록 고정된 레이아웃을 사용하거나 내용의 폭을 조절해야 한다(내부에width를 넣는다).
10、숨바꼭질 bug
IE6과 IE7에서 고양이 버그를 피하는 것은 매우 괴로운 문제이다.용기를 깨뜨린 부동 원소
해결 방법은 간단하다.내용 뒤에 （或其他）触发了 hasLayout，在IE6下就会有错误的表现。解决方法很简单，只需要给같은float:left 정의하기;됐습니다.
16. 목록 계단 버그
목록 계단 버그는 보통

의 하위 요소 에float:left를 사용합니다.이 때 터치하면 가로 목록 (보통 네비게이션 표시줄) 을 만들려고 했지만, IE는 수직이나 계단 모양을 보일 수 있습니다.해결 방법은

에float:left를 정의하는 것이다.하위 요소가 아니라

에 디스플레이: inline을 정의합니다.해결할 수도 있어.17. 수직 목록 간극 버그블록 레벨 하위 요소를 포함하는 것을 사용할 때 IE6(IE7도 가능)는 목록 요소() 사이에 빈틈을 잘못 추가할 수 있습니다.해결 방법:flaot을 제거하고float를 제거하여 이 문제를 해결한다.또 다른 방법은의hasLayout을 촉발하는 것이다(예를 들어 넓이를 정의하고zoom:1;을 사용한다).

에 디스플레이: inline을 정의할 수도 있습니다.이 문제를 해결하려면 다음과 같이 하십시오.포함된 텍스트의 끝에 빈칸을 추가하는 아주 재미있는 방법도 있다.18. IE6의 경우: hoverIE6에서 (href 속성이 있어야만 촉발할 수 있음):hover 행위는 많은 마우스 터치 효과를 실현하는 데 방해가 되지만 해결할 수 있는 방법이 있다.가장 좋은 것은 hover로 중요한 기능을 실현하지 말고 그것으로만 효과를 강화하는 것이다.19. IE6 창 크기 조정 버그바디를 가운데에 놓고 IE 브라우저의 크기를 바꾸면 바디 안에 있는 상대적인 포지셔닝 요소는 고정되지 않습니다.해결 방법:body에position:relative 정의하기;됐어.20. 텍스트 반복 버그IE6에서 숨겨진 요소 (예를 들어 주석, display: none; 의 요소) 가 부동 요소에 포함되면 텍스트 중복 버그를 일으킬 수 있습니다.해결 방법: 부동 요소에 display:inline;을 추가합니다.21. Set Position: relative 요소에 Position 지정: relative는 정렬과 디스플레이가 올바르지 않은 등 여러 가지 이상한 문제를 해결할 수 있습니다.Position 의 특성은 특히 absolute 로 설정하는 것이 좋습니다.22. Float 요소에 inline 속성을 추가하여 두 배의 margin을 피한다이것은 아마도 가장 유명한 버그일 것이다. IE6에서 부동원소에 대해 뜬금없는 두 배의 공백이 있을 것이다. 해결 방법도 뜬금없다. 디스플레이: inline 속성을 설정하면 된다. 플로트 요소라는 속성 자체에 아무런 의미가 없다.23.span 라벨의 높이 문제이것은 그림의 원각을 만들 때 볼 수 있다. 백그라운드-position은 넘쳐흐르기 때문에 스핀 라벨에 라인-height:0을 붙이기만 하면 된다.font-size:0;해결할 수 있어요.