XHTML+CSS 프레임워크를 사용하면 많은 이점이 있지만 실제로 몇 가지 문제도 있습니다. 경험이 부족하거나 불분명한 생각 때문인지, 모든 사람이 검색하는 수고를 덜기 위해 먼저 제가 겪은 몇 가지 문제를 아래에 적어 보겠습니다.
1. Mozilla Firefox 및 IE의 BOX 모델 해석이 일관되지 않아 2px 차이가 발생합니다. 해결 방법:
div{margin:30px!important;margin:28px;}
이 두 여백의 순서를 반대로 작성하면 안 됩니다. Ajie에 따르면 중요한 속성은 IE에서 인식되지 않지만 다른 브라우저에서는 인식됩니다. 따라서 IE에서는 실제로 다음과 같이 해석됩니다.
div{maring:30px;margin:28px}를
반복적으로 정의하면 마지막 항목이 실행되므로 그냥 margin:XXpx!important라고 쓸 수는 없습니다.
2. BOX 해석: IE5와 IE6은 IE5에서 일치하지 않습니다. div{width:300px;margin:0 10px 0 10px;}div의 너비는 300px-10px(오른쪽 패딩)-10px(왼쪽 패딩)로 해석됩니다. div는 280px인 반면 IE6 및 기타 브라우저의 너비는 300px + 10px(오른쪽 패딩) + 10px(왼쪽 패딩) = 320px로 계산됩니다. 현재 다음과 같이 수정할 수 있습니다:
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
이 /**/가 무엇인지 잘 모르겠습니다. 단지 알고 있습니다. IE5와 Firefox는 모두 지원되지만 IE6은 지원하지 않습니다. 이해하시는 분은 알려주세요. :)
3. Mozilla에서는 ul 태그에 기본적으로 padding 값이 있지만 IE에서는 margin에만 값이 있으므로 먼저
ul{margin:0;padding:0;}
으로 정의하면대부분의 문제를 해결할 수 있습니다.
4. 스크립트와 관련하여 언어 속성은 xhtml1.1에서 지원되지 않습니다. 코드만
다음과 같이 변경하면 됩니다.
5. BOX 컨테이너에서 float 방향과 text-align 방향을 동일하게 설정하면(
{float:left;text-align:left;margin:0 0 0 200px;})
다음과 같이 수정할 수 있습니다
. :왼쪽; 텍스트 정렬:왼쪽;여백:0 0 0 200px;디스플레이:인라인;}