IE10以下无法使用img标签怎么办

这篇文章主要为大家展示了“IE10以下无法使用img标签怎么办”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“IE10以下无法使用img标签怎么办”这篇文章吧。

发现问题

之前写过的一段简单的demo，后来在IE10以下使用的时候发现无法使用，先上一段代码

HTML：

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

CSS:

.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; }

JS:

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" class="lazy" data-src="psb.png" width="512" height="1470" ><div class="all" id="box">           <span id="up"></span>    <span id="down"></span></div>

以上是“IE10以下无法使用img标签怎么办”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！