关于IE10以下的img标签问题解决

之前写过的一段简单的demo，后来在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{     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);}

实现的效果就是当鼠标移动到上面span的时候，图片向上移动，移动到下面span的时候，图片向下移动，离开则停止。

然而在IE10以下版本鼠标移上span的时候没有任何效果。

进过测试发现如果给span加上背景颜色的话， 鼠标移上又有效果了

增加代码：

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

添加背景色，然后设置为透明，因为opacity有兼容问题，所以加上filter，最后效果和之前完全一样

后来问了朋友，说是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>

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对VeVb武林网的支持。