인터넷 익스플로러 6, 7 및 8 (1)에서 CSS의 차이점

브라우저에서 가장 기괴한 통계 중 하나는 Internet Explorer 버전 6, 7 및 8이 공존한다는 것입니다. 이 기사에서 Internet Explorer 버전은 총 시장 점유율의 약 65%를 차지합니다. 웹 사이트 개발 커뮤니티 에서이 숫자는 훨씬 작으며 통계에 따르면 약 40%에 불과합니다.

이러한 통계의 가장 흥미로운 부분은 IE6, IE7 및 IE8 사이의 값이 매우 가깝기 때문에 단일 Microsoft 브라우저가 과거의 반대를 지배하는 것을 방지한다는 것입니다. 이러한 유감스러운 통계에 따르면, 개발자는 고객을위한 웹 사이트를 개발할 때 현재 사용되는 모든 IE 브라우저의 포괄적 인 테스트를 수행해야하며, 이는 개인 프로젝트에서 더 많은 사용자를 유치 할 것입니다.

JavaScript 라이브러리 (프레임 워크) 덕분에 크로스 브라우저 JavaScript 테스트는 현재 상황에서 허용하는 것만 큼 완벽하게 가깝습니다. 그러나 이것은 CSS 개발, 특히 현재 IE에있는 세 가지 버전에서는 그렇지 않습니다.

이 기사는 IE6, IE7 및 IE8에 대한 CSS의 지원을 이해하려는 다양한 개발자에게 상세하고 사용하기 쉬운 참조를 제공하려고합니다. 이 참조는 다음 상황의 개요와 호환성을 포함합니다.

A. 3 개의 브라우저 중 하나는 항목을 지원하지만 다른 브라우저는 그렇지 않습니다.

B. 3 개의 브라우저 중 2 개가 항목을 지원하지만 다른 브라우저는이를 지원하지 않습니다.

이 기사는 다음과 같이 논의하지 않습니다.

A. 3 개의 브라우저에서 지원하지 않는 출품작

B. 개인 속성

따라서이 기사의 초점은 필요한 지원 결함보다는 세 브라우저의 차이에 있습니다. 목록은 다음 5 가지 부분으로 나뉩니다.

1. 선택기 및 상속

2. 의사 클래스와 의사 요소

3. 속성 지원

4. 기타 기술

5. 중요한 버그 및 비 호환성 문제

1. 선택기 및 상속

A. 하위 선택자

예

설명하다

자식 선택기는 특정 부모 요소의 모든 직접적인 자식 요소를 선택합니다.

지원하다

버그

IE7에서는 부모 태그와 자식 태그 사이에 HTML 주석이있는 경우 자식 선택기가 작동하지 않습니다.

B. 체인

예

설명하다

체인 클래스는 다음과 같은 여러 클래스 선언이있는 HTML 요소를 보내는 데 사용됩니다.

지원하다

버그

IE6은 체인의 마지막 클래스와 클래스를 사용하는 요소와 일치 할 수 있지만 체인의 모든 클래스를 사용하는 요소를 제한하지 않기 때문에이 상황을 지원하는 것 같습니다.

C. 속성 선택기

예

설명하다

이 선택기는 지정된 속성을 갖는 한 요소를 배치 할 수 있도록합니다. 위의 예에서는 HREF 속성이있는 모든 태그가 제한되는 반면 HREF 속성이없는 태그는 제한되지 않습니다.

지원하다

D. 형제 선택기 접근

예

설명하다

이 선택기는 지정된 요소에 가까운 형제 태그를 찾습니다. 위의 예는 P 태그를 제한하지만 H1 태그의 형제 여야하며 H1 태그 바로 뒤에 따라야합니다. 예를 들어:

위의 코드에서 CSS 스타일은 첫 번째 p에 대해서만 작동합니다. H1의 형제이기 때문에 즉시 H1을 따릅니다. 두 번째 P는 또한 H1의 형제이지만 즉시 H1을 따르지 않습니다.

지원하다

버그

IE7에서는 형제 자매간에 HTML 주석이있는 경우 인접한 형제 자매 선택기가 유효하지 않습니다.

E. 평범한 형제 선택기

예

설명하다

이 선택기는 지정된 요소를 따라 모든 형제 요소를 찾습니다. 위의 예제 에이 선택기를 적용하면 두 P 태그 모두에 대해 작동합니다. 물론, H1 전에 p 요소가 나타나면 해당 P 요소가 일치하지 않습니다.

지원하다