Mengapa kombinasi kelas semu dari atribut latar belakang ditambah a dan a:hover tidak berfungsi dalam logika normal di IE6? Saya menguji bahwa masalah ini ada di browser IE6 dan di bawahnya. Saya sering mengalami masalah ini dan menggunakan metode lain untuk menggantinya.
Ambil navigasi sebagai contoh. Kode berikut sepenuhnya sejalan dengan logika CSS. Secara teori, ini harus berupa " a:hove background image " dikombinasikan dengan "a.nav_1 background positioning" untuk mendapatkan hasil yang diharapkan tidak normal hanya menampilkan gambar latar belakang. Tidak ada Demo koordinat latar belakang (silakan gunakan browser IE6 dan IE6 atau lebih tinggi untuk perbandingan).
*{margin:0;padding:0;}
.header{ posisi:relatif; lebar:745px; tinggi:225px; latar belakang:url(bg.jpg) tanpa pengulangan;}
/*navigasi*/
#nav p{ posisi:mutlak; kiri:0; bawah:0;
#nav a{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav a:hover{background:url(bg.jpg) tanpa pengulangan 0 0;}
/*Status navigasi: Browser IE6 dan di bawahnya tidak kompatibel, browser lain normal*/
#nav a.nav_1{width:80px;posisi latar belakang:0 -213px;}
#nav a.nav_2{width:86px;posisi latar belakang:-80px -213px;}
#nav a.nav_3{width:227px;posisi latar belakang:-166px -213px;}
#nav a.nav_4{width:92px;posisi latar belakang:-393px -213px;}
#nav a.nav_5{width:98px;posisi latar belakang:-485px -213px;}
#nav a.nav_6{width:162px;posisi latar belakang:-583px -213px;}
Solusi yang saya gunakan sebelumnya adalah menambahkan pemilih yang sesuai melalui status. Metode ini terasa kodenya tampak membengkak, dan sebagai penggila kode, sulit bagi saya untuk menerima demonya .
/*Status kelulusan navigasi: solusi sebelumnya*/
#nav a.nav_1: arahkan kursor,
#nav a.nav_1{width:90px;posisi latar belakang:0 -211px;}
#nav a.nav_2: arahkan kursor,
#nav a.nav_2{width:86px;posisi latar belakang:-80px -213px;}
#nav a.nav_3: arahkan kursor,
#nav a.nav_3{width:227px;posisi latar belakang:-166px -213px;}
#nav a.nav_4: arahkan kursor,
#nav a.nav_4{width:92px;posisi latar belakang:-393px -213px;}
#nav a.nav_5: arahkan kursor,
#nav a.nav_5{width:98px;posisi latar belakang:-485px -213px;}
#nav a.nav_6: arahkan kursor,
#nav a.nav_6{width:162px;posisi latar belakang:-583px -213px;}
Secara teoritis, pemilih "a.nav_1" lebih tinggi dari "a:hover", tetapi ketika saya mencoba menambahkan !important, saya menemukan bahwa IE6 menampilkan Demo normal.
Tidak ada efek samping saat menguji browser lain. Kali ini sepertinya tidak ada hubungannya dengan haslayout, namun penyebab dan hasilnya juga membingungkan.
/*Status kelulusan navigasi: solusi saat ini*/
#nav a.nav_1{width:80px;background-position:0 -211px!important;}
#nav a.nav_2{width:86px;background-position:-80px -213px!important;}
#nav a.nav_3{width:227px;background-position:-166px -213px!important;}
#nav a.nav_4{width:92px;posisi latar belakang:-393px -213px!penting;}
#nav a.nav_5{width:98px;posisi latar belakang:-485px -213px!penting;}
#nav a.nav_6{width:162px;background-position:-514px -213px!important;}
Solusi yang diberikan oleh ytzong sangat bagus~ Tampaknya tidak menggunakan singkatan latar belakang masih memiliki kelebihan. Memang ada masalah dengan logika penambahan latar belakang di IE6. Saya juga telah menguji atribut border dan Demo tidak mengalami masalah ini.
*{margin:0;padding:0;}
.header{ posisi:relatif; lebar:745px; tinggi:225px; latar belakang:url(bg.jpg) tanpa pengulangan;}
/*navigasi*/
#nav p{ posisi:mutlak; kiri:0; atas:180px lebar:100%;}
#nav pa{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav pa:hover{gambar-latar belakang:url(bg.jpg);
/*Status navigasi: Browser IE6 dan di bawahnya tidak kompatibel, browser lain normal*/
#nav p a.nav_1{width:80px;background-position:0 -213px;}
#nav p a.nav_2{width:86px;background-position:-80px -213px;}
#nav p a.nav_3{width:227px;posisi latar belakang:-166px -213px;}
#nav p a.nav_4{width:92px;posisi latar belakang:-393px -213px;}
#nav p a.nav_5{width:98px;posisi latar belakang:-485px -213px;}
#nav p a.nav_6{width:162px;posisi latar belakang:-583px -213px;}
Saya tidak tahu apakah ada cara yang lebih baik~