CSS 호환성 핵심 분석_체험교류

IE 대 FF

CSS 호환성 포인트:

DOCTYPE이 CSS 처리에 영향을 줍니다

FF: margin-left 및 margin-right가 자동으로 설정된 경우 div는 이미 중앙에 있지만 IE는 작동하지 않습니다

FF: 본문에 텍스트 정렬을 설정할 때 div는 margin: auto(주로 margin-left, margin-right)를 중앙에 맞추도록 설정해야 합니다.

FF: 이후 패딩을 설정하면 div가 높이와 너비를 늘리지만 IE는 이를 모르므로 추가 높이와 너비를 설정하려면 !important를 사용해야 합니다.

FF: !important를 지원하지만 IE는 이를 무시합니다. !important를 사용하여 특히 FF 수직 중심 문제의 경우

div 스타일을 설정할 수 있습니다. 수직 정렬:가운데 줄 간격을 전체 DIV 줄 높이:200px와 동일하게 늘립니다. 수직으로 중앙에 놓이게 됩니다. 단점은 줄 바꿈 없이 내용을 제어해야 한다는 점

커서: 포인터는 IE FF에서 커서 손가락 모양을 동시에 표시할 수 있으며, 손만 IE는 가능

FF: 링크 추가 테두리와 배경색을 설정하려면 줄 바꿈이 없도록 하려면 display: block을 설정하고 float: left를 설정해야 합니다. 메뉴바를 참고하면, 메뉴바의 높이를 설정하면 하단 가장자리 표시가 어긋나는 것을 방지할 수 있습니다. 높이가 설정되지 않은 경우에는 XHTML+CSS 호환 솔루션

에 공백을 삽입할 수 있습니다. XHTML+CSS 아키텍처를 사용하면 많은 이점이 있지만 미숙한 사용 때문이든, 불분명한 사고 때문이든 실제로 몇 가지 문제가 있습니다. 모두가 둘러보지 않도록 제가 겪은 몇 가지 문제를 아래에 적어 보겠습니다^^

1. Mozilla에서는 Firefox와 IE의 BOX 모델 해석이 일치하지 않아 2px 차이가 발생합니다. 해결 방법:

div{margin:30px!important;margin:28px;}

이 두 여백의 순서는 작성하면 안 됩니다. 반대로 Ajie에 따르면 !important 속성은 IE에서 인식되지 않지만 다른 브라우저에서는 인식됩니다. 따라서 IE에서는 실제로 다음과 같이 해석됩니다.

div{maring:30px;margin:28px}

정의를 반복하면 마지막 정의에 따라 실행되므로 단지 margin:XXpx!important라고 쓸 수는 없습니다.

2. IE5와 IE6의 BOX 해석은 IE5에서 div{width:300px;margin:0 10px 0 10px;}로 해석됩니다. 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.ul 태그에는 Mozilla에서 기본적으로 padding 값이 있지만 IE에서는 margin에만 값이 있으므로

ul{margin:0;padding:0;}을 먼저 정의하세요

는 대부분의 문제를 해결할 수 있습니다

4. 스크립트의 경우 xhtml1.1에서는 언어 속성을 지원하지 않습니다. 코드를

<script>으로 변경하면 됩니다.</script>