브라우저에 많은 버그가 있을 수 있지만, 다르다고 느낄 때 버그가 있다는 의미는 아닙니다. 문제에는 여러 가지 이유가 있을 수 있으므로 생산자는 문제를 해결하기 위해 특정 방법이 필요합니다.
CSS 2.1을 더 잘 지원하는 Opera 9.2, Firefox 2.0 또는 Safari 3.0과 같은 고급 브라우저를 테스트용으로 선택하는 것이 좋습니다. IE 6에는 가장 많은 문제가 있으므로 IE 6을 유일한 테스트 브라우저로 사용하지 마십시오. 이는 제작자(특히 초보자)가 CSS 2.1의 사양을 이해하고 브라우저의 성능이 올바른지 판단하는 데 매우 불리합니다.
고급 브라우저에서는 테스트는 제대로 되었는데 IE에 문제가 있다면 기본적으로 IE에 문제가 있다고 판단할 수 있습니다.
고급 브라우저의 표시가 올바르지 않은 경우 먼저 다음과 같은 예비 판단을 내릴 수 있습니다.
1. 철자가 올바른지 여부는 W3C 확인 또는 웹 페이지 편집 소프트웨어의 확인 기능을 사용하여 (X)HTML 문서의 태그가 일치하는지, 중첩 순서가 올바른지, 빈 태그가 있는지 확인할 수 있습니다. 닫혀 있고 CSS 철자가 올바른지 여부입니다. 잘못된 중첩과 잘못된 철자는 매우 일반적인 오류입니다.
팁: 브라우저가 CSS 속성을 지원하는지 여부 등을 포함하여 (X)HTML 및 CSS 확인 기능을 제공할 수 있는 많은 편집 소프트웨어가 있습니다. 예: Dreamweaver 8 이상, TopStyle 및 기타 소프트웨어.
팁: Firefox의 추가 기능 소프트웨어인 "Firebug"는 (X)HTML, CSS 및 JavaScript가 올바른지 확인할 수 있을 뿐만 아니라 페이지에 있는 요소의 프레임과 위치를 동적으로 표시할 수 있는 매우 유용한 도구입니다. 웹페이지 디버깅에 매우 좋습니다.
2. 적합한 DTD가 있습니까?
이 책의 다른 장에서는 DOCTYPE의 중요성이 여러 번 강조되었습니다. 다양한 DOCTYPE은 (X)HTML 및 CSS에 대한 브라우저의 해석에 직접적인 영향을 미칩니다.
3. 브라우저는 CSS 속성을 지원합니까? 이전 장에서 소개한 것처럼 최신 브라우저는 대부분의 CSS 2.1 사양과 일부 CSS 3 사양을 지원하지만 일부 CSS 속성은 브라우저에서 널리 지원되지 않습니다. 적용되지 않는 경우 브라우저에서 지원하는지 확인하세요.
4. 요소에 눈에 띄는 테두리나 배경색을 추가하는 등 문제가 있는 부분을 강조하기 위해 문제를 분리합니다.
테두리를 추가하여 문제가 해결된다면 여백이 겹치는 문제입니다.
배경을 추가했는데 배경이 표시되지 않는 경우, 특수 기능 때문이거나 플로팅 요소가 닫히지 않은 것일 수 있습니다.
일부 속성, 특히 IE의 hasLayout을 트리거하는 속성을 수정하여 IE의 일반적인 버그인지 확인해보세요.
5. 기본 테스트 설정 그래도 문제가 해결되지 않으면 문제 파일을 복사하고 추가 (X)HTML을 삭제하고 문제가 있는 부분만 남겨 둘 수 있습니다.
(X)HTML 내의 주석 문제를 삭제하고 문제가 해결되는지 확인하십시오.
요소 사이의 공백을 제거하고 문제가 사라지는지 확인하세요.
그런 다음 문제가 사라질 때까지 블록 단위로 스타일 시트를 주석 처리하면 방금 주석 처리한 스타일이 문제가 됩니다.
6. 현상을 해결하는 것보다 문제를 해결하는 것이 궁극적인 목표입니다. 단순히 성능을 수용하기 위해 웹 페이지를 "아름답다"게 만드는 복잡한 Hack을 사용하는 것보다 문제의 근본 원인을 찾아서 해결하는 것이 궁극적인 목표입니다. 근본적인 문제를 해결하지 못하면 브라우저를 업그레이드할 때 더 많은 문제가 발생할 수 있습니다. 동시에 해킹으로 인해 새로운 문제가 발생할 수 있습니다. 특히 IE의 hasLayout 속성을 트리거하거나 방지하는 등의 문제가 발생할 수 있습니다.
요소의 margin 속성을 취소하고 대신 상위 요소의 padding 속성을 설정하는 등의 다른 사고 방식으로 문제를 피할 수도 있습니다.
실제로 해결할 수 없는 경우에만 Hack을 사용하세요.