일반적인 CSS 문제에 대한 솔루션 요약_경험 교환

1. HTML 요소에 맞춤법 오류가 있는지, 닫는 태그를 잊었는지 확인하세요
베테랑이라도 div의 중첩 관계에서 실수를 하는 경우가 많습니다. Dreamweaver의 확인 기능을 사용하여 오류를 확인할 수 있습니다.

2. CSS가 맞는지 확인하세요.
철자 오류가 있는지, 끝자리 }를 잊어버렸는지 등을 확인하세요. CleanCSS를 사용하여 CSS의 철자 오류를 확인할 수 있습니다. CleanCSS는 CSS의 무게를 줄이는 도구이지만 철자 오류도 확인할 수 있습니다.

3. 오류가 발생한 위치 확인
오류가 전체 레이아웃에 영향을 미치는 경우 div 블록 삭제 후 화면이 정상으로 돌아올 때까지 div 블록을 하나씩 삭제하면 됩니다. 오류가 발생한 위치를 확인합니다.

4. border 속성을 사용하여 오류 요소의 레이아웃 특성을 결정합니다.
레이아웃에 float 속성을 사용하면 주의하지 않으면 오류가 발생합니다. 이때 요소의 경계를 결정하기 위해 요소에 border 속성을 추가하면 오류의 원인이 밝혀집니다.

5. 부동 소수점 요소의 상위 요소는 클리어 속성을 지정할 수 없습니다.
MacIE에서 부동 소수점 요소의 상위 요소에 클리어 속성을 사용하는 경우 주변 부동 소수점 요소의 레이아웃은 다음과 같습니다. 혼란스러운. 이것은 MacIE의 유명한 버그입니다. 모르면 우회하게 됩니다.

6. 부동 요소는 너비 속성을 지정해야 합니다.
지정된 너비 없이 부동 요소를 표시할 때 많은 브라우저에 버그가 있습니다. 따라서 float 요소의 내용에 관계없이 width 속성을 지정해야 합니다.
또한 요소를 지정할 때 단위는 px 대신 em을 사용해 보세요.

7. Float 요소는 여백 및 패딩과 같은 속성을 지정할 수 없습니다.
IE에는 마진 및 패딩이 지정된 부동 요소를 표시할 때 버그가 있습니다. 따라서 float 요소에 여백 및 패딩 속성을 지정하지 마십시오(여백 및 패딩을 설정하기 위해 float 요소 내에 div를 중첩할 수 있음). 해킹을 사용하여 IE에 특수 값을 지정할 수도 있습니다.

8. float 요소의 너비 합은 100% 미만이어야 합니다.
float 요소의 너비 합이 정확히 100%인 경우 일부 고대 브라우저에서는 제대로 표시되지 않습니다. 따라서 너비의 합이 99% 미만인지 확인하시기 바랍니다.

9. 기본 스타일을 재설정하셨나요?
여백, 패딩 등과 같은 일부 속성은 브라우저마다 다르게 해석됩니다. 따라서 개발하기 전에 모든 margin과 padding을 0으로, 목록 스타일을 없음으로 설정하는 등의 작업을 수행하는 것이 가장 좋습니다.

10. DTD 작성을 잊으셨나요?
다른 브라우저를 어떻게 조정하더라도 표시 결과가 여전히 다른 경우 페이지 시작 부분에 다음 DTD 줄을 작성하는 것을 잊었는지 확인할 수 있습니다.
nbsp;HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>