Memecahkan masalah tag img di bawah IE10

Saya menulis demo sederhana sebelumnya, tetapi kemudian ternyata demo tersebut tidak dapat digunakan saat menggunakan IE10 atau yang lebih lama. Mari kita mulai dengan sepotong kode.

 <div class=all id=box> <img id=gambar src=psb.png lebar=512 tinggi=1470 > <span id=up></span> <span id=down></span></div>

 .all{ posisi: relatif; lebar: 512px; tinggi: 400px; batas: 1px solid #000; margin:100px otomatis; luapan: tersembunyi;}span{ lebar: 512px; atas: 0; kursor: penunjuk;}#bawah{ atas: otomatis; bawah: 0;

 var ops = document.getElementById('image'), oup = document.getElementById('up'), odown = document.getElementById('down'), obox = document.getElementById('box'), timer = null num; = 0;oup.onmouseover = function(){ clearInterval(timer); timer = setInterval(function(){ angka -= 4; if(angka < -1070){ angka = -1070; clearInterval(timer); } ops.style.marginTop = angka+'px'; timer = setInterval(fungsi(){ angka += 4; if(angka > 0){ angka = 0; clearInterval(timer); } ops.style.marginTop = angka+'px'; },30)}obox.onmouseout = function(){ clearInterval(timer);}

Efek yang dicapai adalah ketika mouse bergerak ke rentang atas, gambar bergerak ke atas, ketika mouse bergerak ke rentang bawah, gambar bergerak ke bawah, dan berhenti ketika keluar.

Namun, pada versi di bawah IE10, tidak ada efek saat mouse digerakkan melebihi rentang tersebut.

Setelah pengujian, saya menemukan bahwa jika Anda menambahkan warna latar belakang ke rentang, efeknya akan muncul lagi saat mouse digerakkan ke atasnya.

Tambahkan kode:

 latar belakang: #fff; opasitas: 0; filter:alfa(opasitas=0);

Tambahkan warna latar belakang dan atur menjadi transparan. Karena opacity memiliki masalah kompatibilitas, saya menambahkan filter dan efek akhirnya sama persis seperti sebelumnya.

Kemudian saya bertanya kepada seorang teman dan dia mengatakan bahwa tag img akan ada di bawah sarang IE10, jadi saya meletakkan tag img di luar div.

 <img id=gambar src=psb.png lebar=512 tinggi=1470 ><div class=all id=box> <span id=up></span> <span id=down></span></div>

Di atas adalah keseluruhan isi artikel ini, saya berharap isi artikel ini memiliki nilai referensi tertentu untuk belajar atau bekerja semua orang. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk berkomunikasi Jaringan.