1. HTML 요소에 철자 오류가 있는지, 닫는 태그를 잊어버렸는지 확인하세요.
숙련된 사용자라도 div 중첩이 잘못되는 경우가 많습니다. Dreamweaver의 확인 기능을 사용하여 오류를 확인할 수 있습니다.
2. CSS가 올바른지 확인하세요
철자 오류, 끝 부분의 } 잊어버린 등을 확인하세요. CleanCSS를 사용하여 CSS의 철자 오류를 확인할 수 있습니다. CleanCSS는 CSS의 무게를 줄이는 도구이지만 철자 오류도 확인할 수 있습니다.
3. 오류가 발생한 위치를 확인합니다.
오류가 전체 레이아웃에 영향을 미치는 경우 특정 div 블록을 삭제한 후 화면이 정상으로 돌아올 때까지 div 블록을 하나씩 삭제하여 오류가 발생한 위치를 확인할 수 있습니다.
4. 테두리 속성을 사용하여 오류 요소의 레이아웃 특성을 결정합니다.
주의하지 않으면 부동 속성 레이아웃을 사용하면 오류가 발생할 수 있습니다. 이때 요소의 경계를 결정하기 위해 요소에 border 속성을 추가하면 오류의 원인이 밝혀집니다.
5. float 요소의 상위 요소는clear 속성을 지정할 수 없습니다.
MacIE에서는 float 요소의 상위 요소에clear 속성을 사용하면 주변 float 요소의 레이아웃이 혼란스러워집니다. 이것은 MacIE의 유명한 버그입니다. 모르면 우회하게 됩니다.
6. float 요소는 width 속성을 지정해야 합니다.
너비가 지정되지 않은 부동 소수점 요소를 표시할 때 많은 브라우저에 버그가 있습니다. 따라서 float 요소의 내용에 관계없이 width 속성을 지정해야 합니다.
또한 요소를 지정할 때 단위는 px 대신 em을 사용해 보세요.
7. Float 요소는 여백, 패딩 등의 속성을 지정할 수 없습니다.
IE에는 여백과 패딩이 지정된 부동 요소를 표시할 때 버그가 있습니다. 따라서 float 요소에 여백 및 패딩 속성을 지정하지 마십시오(여백 및 패딩을 설정하기 위해 float 요소 내에 div를 중첩할 수 있음). 해킹을 사용하여 IE에 특수 값을 지정할 수도 있습니다.
8. 플로트 요소의 너비의 합은 100%보다 작아야 합니다.
float 요소의 너비 합이 정확히 100%인 경우 일부 고대 브라우저에서는 이를 제대로 표시하지 않습니다. 따라서 너비의 합이 99% 미만인지 확인하시기 바랍니다.
9. 기본 스타일을 재설정하셨나요?
여백, 패딩 등과 같은 일부 속성은 브라우저마다 다르게 해석됩니다. 따라서 개발하기 전에 모든 margin과 padding을 0으로, 목록 스타일을 없음으로 설정하는 등의 작업을 수행하는 것이 가장 좋습니다.
10. DTD 작성을 잊으셨나요?
조정 방법에 관계없이 여러 브라우저의 표시 결과가 여전히 다른 경우 페이지 시작 부분에 다음 DTD 줄을 작성하는 것을 잊었는지 확인할 수 있습니다.