멀티브라우저 CSS 호환성 분석 요약_체험교류
- WBOY원래의
- 2016-05-16 12:06:531616검색
CSS 호환성 포인트:
1. DOCTYPE은 CSS 처리에 영향을 줍니다.
2.FF: margin-left 및 margin-right가 자동으로 설정된 경우 div는 이미 중앙에 있지만 IE는 작동하지 않습니다.
3. FF: 본문이 텍스트 정렬을 설정하면 div는 margin: auto(주로 margin-left, margin-right)를 가운데로 설정해야 합니다.
4. FF: 패딩을 설정한 후 div는 높이와 너비를 늘리지만 IE는 그렇지 않으므로 추가 높이와 너비를 설정하려면 !important를 사용해야 합니다.
5. FF: !important를 지원하지만 IE는 이를 무시합니다. !important를 사용하여 FF에 대한 특별한 스타일을 설정할 수 있습니다.
6. div의 세로 가운데 맞춤 문제: Vertical-align:middle; 줄 간격을 전체 DIV line-height:200px와 동일하게 늘립니다. 그러면 텍스트가 세로 가운데 맞춤됩니다. 단점은 내용을 조절해야 하고 포장하지 말아야 한다는 점이다.
7. 커서: 포인터는 IE FF에서 커서 손가락 모양을 동시에 표시할 수 있으며, 손은 IE에서만 표시할 수 있습니다.
8. 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에서는 언어 속성이 지원되지 않습니다. 코드를