Cara Menggunakan :nth-child dalam Internet Explorer 8: Penyelesaian

IE8 :nth-child and :before: A Fix

Internet Explorer 8 terkenal kerana ketidakkonsistenannya dengan standard web moden. Isu biasa yang dihadapi oleh pembangun ialah kekurangan sokongan untuk pemilih anak ke-n CSS.

Masalahnya

Pertimbangkan kod CSS berikut:

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

Walaupun kod ini berfungsi dengan sempurna dalam kebanyakan penyemak imbas moden, ia secara misteri gagal dalam Internet Explorer 8.

Penyelesaian

Walaupun terdapat cabaran yang ditimbulkan oleh IE8, terdapat penyelesaian untuk mensimulasikan kefungsian :nth-child. Dengan memanfaatkan gabungan adik beradik bersebelahan ( ), anda boleh menyasarkan elemen tertentu dalam urutan:

#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;
}

Menggunakan pendekatan ini, anda boleh meniru variasi asas :nth-child. Walau bagaimanapun, variasi yang lebih kompleks seperti :nth-child(odd) atau :nth-child(4n 3) tidak boleh direplikasi dengan kaedah ini.

Nota: Walaupun penyelesaian ini menyelesaikan isu menggunakan gaya pada elemen tertentu dalam urutan, ia mungkin tidak meniru sepenuhnya kelakuan :nth-child dan boleh membawa kepada akibat yang tidak diingini dalam lebih kompleks senario.

Atas ialah kandungan terperinci Cara Menggunakan :nth-child dalam Internet Explorer 8: Penyelesaian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!