이러한 통계에서 흥미로운 부분은 IE6, IE7, IE8의 수치가 매우 비슷하다는 점입니다. 이는 과거와는 반대로 단일 Microsoft 브라우저가 현장을 지배할 수 없다는 것입니다. 이러한 안타까운 통계를 바탕으로 개발자는 클라이언트용 웹사이트를 개발할 때 현재 사용되는 모든 IE 브라우저를 철저히 테스트해야 하며, 이는 개인 프로젝트에 더 많은 사용자를 유치할 수도 있습니다.
JavaScript 라이브러리(프레임워크) 덕분에 브라우저 간 JavaScript 테스트는 현재 상황이 허용하는 한 완벽에 가깝습니다. 그러나 CSS 개발에서는 그렇지 않습니다. 특히 현재 존재하는 세 가지 버전의 IE의 경우 더욱 그렇습니다.
이 문서에서는 IE6, IE7 및 IE8에 대한 CSS 지원을 이해하려는 다양한 개발자에게 상세하고 사용하기 쉬운 참조 자료를 제공하려고 합니다. 이 참조에는 다음 상황에 대한 개요 및 호환성이 포함되어 있습니다.
A. 3개의 브라우저 중 1개는 지원하고 나머지 2개는 지원하지 않는 항목
B. 세 브라우저 중 두 브라우저는 지원하지만 한 브라우저는 지원하지 않는 항목
이 기사에서는 다음 내용을 다루지 않습니다.
A. 세 가지 브라우저에서 지원하지 않는 항목
B. 개인 속성
따라서 이 문서에서는 필요한 지원 단점보다는 세 브라우저 간의 차이점에 중점을 둡니다. 목록은 다음 5개 섹션으로 구분됩니다.
1. 선택자와 상속
2. 의사 클래스와 의사 요소
3. 속성 지원
4. 기타 다양한 기술
5. 중요한 버그 및 비호환성 문제
1. 선택자와 상속
A. 하위 선택자
예
| 본문 > 피 { 색상: #fff; } |
설명하다
하위 선택기는 특정 상위 요소의 모든 직접 하위 요소를 선택합니다. 위 예에서 body는 상위 요소이고 p는 하위 요소입니다.
지원현황
| IE6 아니요 IE7 예 IE8 예 |
버그
IE7에서는 상위 태그와 하위 태그 사이에 HTML 주석이 있는 경우 하위 선택기가 작동하지 않습니다.
B. 체인 종류
예
| .class1.class2.class3 { 배경: #fff; } |
설명하다
체인 클래스는 다음과 같이 여러 클래스 선언이 포함된 HTML 요소를 보내는 데 사용됩니다.
| 여기에 콘텐츠가 있습니다. |
지원현황
| IE6 아니요 IE7 예 IE8 예 |
버그
IE6은 체인의 마지막 클래스를 해당 클래스를 사용하는 요소와 일치시킬 수 있기 때문에 이러한 상황을 지원하는 것으로 보입니다. 그러나 체인의 모든 클래스를 사용하는 요소를 제한할 수는 없습니다.
C. 속성 선택자
예
| a[href] { 색상: #0f0; } |
설명하다
이 선택기를 사용하면 지정된 속성이 있는 한 요소를 찾을 수 있습니다. 위의 예에서 href 속성이 있는 모든 태그는 적합하지만 href 속성이 없는 태그는 적합하지 않습니다.
지원현황
| IE6 아니요 IE7 예 IE8 예 |
D. 가까운 형제 선택자
예
| h1+p { 색상: #f00; } |
설명하다
이 선택기는 지정된 요소에 인접한 형제 태그를 찾습니다. 위의 예는 p 태그를 한정하지만 h1 태그의 형제 태그여야 하며 h1 태그 바로 뒤에 와야 합니다. 예를 들어:
제목여기에 콘텐츠가 있습니다. 여기에 콘텐츠가 있습니다. |
위 코드에서 CSS 스타일은 첫 번째 p에만 적용됩니다. 왜냐하면 h1의 형제이고 h1을 따르기 때문입니다. 두 번째 p도 h1의 형제이지만 h1을 바로 따르지는 않습니다.
지원현황
| IE6 아니요 IE7 예 IE8 예 |
버그
IE7에서는 형제 사이에 HTML 주석이 있는 경우 인접한 형제 선택자가 아무런 효과가 없습니다.
E. 일반 형제 선택자
예
| h1~p { 색상: #f00; } |
설명하다
이 선택기는 지정된 요소 뒤에 있는 모든 형제 요소를 찾습니다. 위의 예에 이 선택기를 적용하면 두 p 태그 모두에 적용됩니다. 물론 h1 앞에 p 요소가 나타나면 해당 p 요소는 일치하지 않습니다.
지원현황
| IE6 아니요 IE7 예 IE8 예 |