การแก้ปัญหาแท็ก img ด้านล่าง IE10

ฉันเคยเขียนเดโมง่ายๆ มาก่อน แต่ต่อมาพบว่าไม่สามารถใช้งานได้เมื่อใช้ IE10 หรือต่ำกว่า เรามาเริ่มด้วยโค้ดกันก่อน

 <div class=all id=box> <img id=image src=psb.png width=512 height=1470 > <span id=up></span> <span id=down></span></div>

 .all{ ตำแหน่ง: สัมพันธ์กัน; } ความสูง: 400px; เส้นขอบ: 100px อัตโนมัติ; ด้านบน: 0; เคอร์เซอร์: ตัวชี้;} #down {บน: อัตโนมัติ; ล่าง: 0;

 var ops = document.getElementById('image'), oup = document.getElementById('up'), odown = document.getElementById('down'), obox = document.getElementById('box'), ตัวจับเวลา = null; num = 0;oup.onmouseover = function(){ clearInterval(ตัวจับเวลา); timer = setInterval(function(){ num -= 4; if(num < -1070){ num = -1070; clearInterval(timer); } ops.style.marginTop = num+'px'; },30)}odown.onmouseover = ฟังก์ชั่น(){ clearInterval(จับเวลา); จับเวลา = setInterval (ฟังก์ชั่น () { num += 4; if (num > 0) { num = 0; clearInterval (จับเวลา); } ops.style.marginTop = num+'px'; },30)}obox.onmouseout = function(){ clearInterval(ตัวจับเวลา);}

ผลลัพธ์ที่ได้คือเมื่อเมาส์เลื่อนไปที่ช่วงบน รูปภาพจะเลื่อนขึ้น เมื่อเมาส์เลื่อนไปที่ช่วงล่าง รูปภาพจะเลื่อนลง และหยุดเมื่อออกไป

อย่างไรก็ตาม ในเวอร์ชันที่ต่ำกว่า IE10 จะไม่มีผลใดๆ เมื่อเลื่อนเมาส์ไปเหนือช่วงนั้น

หลังการทดสอบ ฉันพบว่าหากฉันเพิ่มสีพื้นหลังให้กับช่วง การเลื่อนเมาส์ไปเหนือจะมีผล

เพิ่มรหัส:

 พื้นหลัง: #fff; ความทึบ: 0; ตัวกรอง: อัลฟา (ความทึบ = 0);

เพิ่มสีพื้นหลังและตั้งค่าเป็นโปร่งใส เนื่องจากความทึบมีปัญหาความเข้ากันได้ ฉันจึงเพิ่มตัวกรองและเอฟเฟกต์สุดท้ายก็เหมือนเดิมทุกประการ

ต่อมา ฉันถามเพื่อนและเขาบอกว่าแท็ก img จะซ้อนอยู่ใต้ IE10 ดังนั้นฉันจึงวางแท็ก img ไว้นอก div

 <img id=image src=psb.png width=512 height=1470 ><div class=all id=box> <span id=up></span> <span id=down></span></div>

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่าเนื้อหาของบทความนี้จะมีคุณค่าอ้างอิงสำหรับการศึกษาหรือการทำงานของทุกคน หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อการสื่อสารได้ เครือข่าย.