Solving the problem of img tag below IE10

I wrote a simple demo before, but later found that it couldn’t be used when using IE10 or below. Let’s start with a piece of code.

 <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{ position: relative; width: 512px; height: 400px; border: 1px solid #000; margin:100px auto; overflow: hidden;}span{ width: 512px; height: 200px; position: absolute; left: 0; top: 0; cursor: pointer;}#down{ top: auto; bottom: 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(){ num -= 4; if(num < -1070){ num = -1070; clearInterval(timer); } ops.style.marginTop = num+'px'; },30)}odown.onmouseover = function(){ clearInterval(timer); timer = setInterval(function(){ num += 4; if(num > 0){ num = 0; clearInterval(timer); } ops.style.marginTop = num+'px'; },30)}obox.onmouseout = function(){ clearInterval(timer);}

The effect achieved is that when the mouse moves to the upper span, the picture moves upward, when the mouse moves to the lower span, the picture moves downward, and stops when it leaves.

However, in versions below IE10, there is no effect when the mouse is moved over the span.

After testing, I found that if you add a background color to span, it will have an effect again when the mouse is moved over it.

Add code:

 background: #fff; opacity: 0; filter:alpha(opacity=0);

Add a background color and set it to transparent. Because opacity has compatibility issues, I add a filter and the final effect is exactly the same as before.

Later, I asked a friend and he said that the img tag will be present under IE10 nesting, so I put the img tag outside the 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>

The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support to VeVb Wulin Network.