1. 의심스러우면 즉시 확인하라
문제가 발생했을 때 원본 코드를 간단히 확인하면 많은 어려움을 겪을 수 있습니다. W3C에는 XHTML 및 CSS에 사용할 수 있는 감지 도구가 있습니다. 파일 시작 부분의 오류는 부적절한 구조 및 기타 요인으로 인해 더 많은 오류를 유발할 수 있습니다. 가장 눈에 띄는 오류 중 일부를 먼저 수정한 후 다시 확인하면 오류 수가 줄어들 수 있습니다.
2. 플로팅 기능을 사용할 때 지침을 적절하게 지우십시오.
플로팅은 위험한 기능이며 예상한 결과를 얻지 못할 수도 있습니다. 주변 컨테이너의 경계를 넘어 확장되는 부동 요소나 기타 비정상적인 상황이 발생하는 경우 올바르게 수행하고 있는지 확인하세요. Complex Spiral Consulting 웹 사이트에서 Eric Meyer의 강의를 참조하세요.
3. 경계가 겹치지 않도록 패딩이나 테두리를 사용하십시오.
있어서는 안되는 작은 공간 때문에 어려움을 겪을 수도 있고, 필요할 때 작은 공간을 짜내지 못할 수도 있습니다. 여백을 사용하면 테두리를 겹치는 것이 쉽습니다. Andy Budd가 자신의 웹사이트에서 무엇이 가능한지 설명합니다.
4. 요소에 패딩/테두리와 높이 또는 너비를 동시에 지정하지 마십시오.
Windows 버전의 IE에서는 너비 및 높이 계산 문제가 자주 발생합니다. 이 문제를 해결하는 방법은 여러 가지가 있으나, 상위 요소에서 높이와 너비를 지정해야 하는 경우에는 상위 요소 내의 하위 요소에 마진을 적용하거나, 하위 요소에서 높이와 너비를 지정해야 하는 경우에는 마진을 적용하는 것이 가장 좋습니다. 이를 달성하려면 상위 요소에 패딩을 적용하세요.
5. 최소 너비/최소 높이에 의존하지 마세요
IE의 Windows 버전은 두 구문을 모두 지원하지 않습니다. 그러나 Windows 버전의 IE는 어느 정도 최소 너비/최소 높이와 동등한 효과를 얻을 수 있으므로 IE에 일부 필터링 기능을 추가하기만 하면 원하는 결과를 얻을 수 있습니다.
6. 의심스러운 경우 먼저 백분율을 줄이십시오.
때로는 특정 오류로 인해 50%+50%가 100.1%가 되어 웹페이지에 문제가 발생할 수 있습니다. 이때 이 값을 49% 또는 49.9%로 변경해 보세요.
7. "TRouBLed"라고 쓰는 방법을 기억하세요.
Border, margin 및 padding의 축약된 구문은 위에서 시작하여 시계 방향으로 위쪽, 오른쪽, 아래쪽, 왼쪽으로 돌아가는 특정 순서를 갖습니다. 따라서 margin:0 1px 3px 5px는 위쪽에 테두리가 없습니다. 오른쪽에 등등. "TRouBLe"을 기억하면 순서가 틀리지 않을 것입니다.
8. 값이 0이 아닌 한 단위를 지정해야 합니다.
CSS에서는 각 글꼴, 여백 및 기타 다양한 값에 대한 단위를 지정해야 합니다. (유일한 예외는 줄 높이입니다)