Internet Explorer 8에서 :nth-child를 사용하는 방법: 해결 방법

IE8 :nth-child 및 :before: 수정

Internet Explorer 8은 최신 웹 표준과 일치하지 않는 것으로 악명이 높습니다. 개발자가 직면하는 일반적인 문제는 CSS n번째 하위 선택기에 대한 지원이 부족하다는 것입니다.

문제

다음 CSS 코드를 고려하세요.

#nav-primary ul li:nth-child(1) a:after { }

이 코드는 대부분의 최신 브라우저에서 완벽하게 작동하지만 Internet Explorer 8에서는 이상하게 작동하지 않습니다.

해결책

IE8의 어려움에도 불구하고 :nth-child 기능을 시뮬레이션하는 해결 방법입니다. 인접한 형제 조합자( )를 활용하면 시퀀스의 특정 요소를 대상으로 지정할 수 있습니다.

#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}
#nav-primary ul li:first-child + li a {
    border-top: 5px solid blue;
}
#nav-primary ul li:first-child + li + li a {
    border-top: 5px solid green;
}

이 접근 방식을 사용하면 :nth-child의 기본 변형을 에뮬레이트할 수 있습니다. 그러나 :nth-child(odd) 또는 :nth-child(4n 3)와 같은 더 복잡한 변형은 이 방법으로 복제할 수 없습니다.

참고: 이 해결 방법으로 문제가 해결되지만 시퀀스의 특정 요소에 스타일을 적용하면 :nth-child의 동작을 완전히 복제하지 못할 수 있으며 더 복잡한 시나리오에서는 의도하지 않은 결과가 발생할 수 있습니다.

위 내용은 Internet Explorer 8에서 :nth-child를 사용하는 방법: 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!