나는 모든 사람이 IE6 Three Pixel Gap, IE5/6 Doubled Float-Margin Bug 등과 같은 일반적인 CSS BUG 처리에 상대적으로 익숙하다고 생각합니다. 그러나 우리는 종종 복잡한 CSS BUG 문제에 직면합니다. 소위 "복잡함"은 본질적으로 트리거 조건이 매우 복잡하다는 것을 의미하며 "BUG"는 반드시 브라우저 BUG를 의미하지는 않습니다. 이런 종류의 문제에 대해 우리가 가장 먼저 해결해야 할 것은 문제를 찾는 방법입니다. 문제를 빨리 찾아내는 것만으로도 문제를 더 잘 해결할 수 있습니다.
빠른 위치 지정을 위해 내 개인적인 경험은 일반적으로 다음과 같습니다(기본적으로 Taobao에서 직면한 복잡한 CSS BUG 문제의 90% 이상을 찾을 수 있습니다).
1. 페이지 레이블이 닫혀 있는지 확인하십시오
. 매일매일 해결되지 않는 CSS BUG 문제는 이것 때문에 발생합니다. 결국 페이지 템플릿은 일반적으로 개발자가 중첩하므로 이러한 문제가 쉽게 발생할 수 있습니다.
빠른 팁: Dreamweaver를 사용하여 파일을 열어 확인할 수 있습니다. 일반적으로 닫힌 태그가 없으면 노란색 배경으로 강조 표시됩니다.
2. 스타일 제외 방법:
일부 복잡한 페이지에서는 N개의 외부 링크 CSS 파일을 로드한 다음 CSS 파일을 하나씩 삭제하고 BUG에 의해 트리거된 특정 CSS 파일을 찾아서 잠금 범위를 좁힐 수 있습니다.
방금 잠긴 문제가 있는 CSS 스타일 파일의 경우 특정 스타일 정의를 한 줄씩 삭제하고 특정 트리거 스타일 정의와 특정 트리거 스타일 속성을 찾습니다.
3. 모듈 확인 방법
때로는 페이지의 HTML 요소에서 시작할 수도 있습니다. 페이지에서 다른 HTML 모듈을 삭제하고 문제를 유발하는 HTML 모듈을 찾으십시오.
4. 부동소수점이 지워졌는지 확인합니다.
실제로 부동소수점을 삭제하지 않아 발생하는 CSS BUG 문제가 많이 있습니다. 부동소수점을 지우는 좋은 습관을 기르는 것이 필요합니다. 추가 HTML 태그 없이 부동소수점을 지우는 방법을 사용하는 것이 좋습니다. 부동소수점을 지우려면overflow:hidden;zoom:1과 같은 유사한 방법을 사용하지 마십시오. 이는 너무 제한적입니다. ).
5. IE에서 haslayout이 실행되는지 확인하세요.
IE에서 발생하는 많은 복잡한 CSS BUG는 IE의 고유한 haslayout과 밀접하게 관련되어 있습니다. haslayout에 익숙해지고 이해하면 복잡한 CSS 버그를 처리하는 데 드는 노력을 절반으로 줄여 두 배의 결과를 얻을 수 있습니다. old9가 번역한 "레이아웃에 대하여"를 읽는 것이 좋습니다. (훌륭한 GFW를 통과할 수 없는 경우 파란색에서 다시 게시글을 읽을 수 있습니다.)
빠른 팁: haslayout이 트리거되면 IE 디버깅 도구 IE 개발자 도구 모음의 속성 haslayout 값은 -1로 표시됩니다.
6. 테두리 및 배경 디버깅 방법은
이름에서 알 수 있듯이 디버깅할 요소에 눈에 띄는 테두리나 배경(보통 검은색 또는 빨간색)을 설정하는 것입니다. 이 방법은 CSS BUG를 디버깅하는 데 가장 일반적으로 사용되는 방법 중 하나이며 복잡한 BUG에도 여전히 적용 가능합니다. 저렴하고 환경 친화적입니다^^
제가 모든 사람에게 마지막으로 강조하고 싶은 것은 좋은 글쓰기 습관을 기르고, 추가 태그를 줄이고, 의미론적으로 노력하고, 표준을 준수하면 실제로 더 복잡한 CSS BUG를 많이 줄일 수 있다는 것입니다. , 그것은 우리 자신을 위해 문제를 일으키는 것입니다. 모두가 벌레를 멀리하고 더 나은, 더 나은 삶을 살아갈 수 있기를 바랍니다.