IE10以下無法使用img標簽怎么辦

這篇文章主要為大家展示了“IE10以下無法使用img標簽怎么辦”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“IE10以下無法使用img標簽怎么辦”這篇文章吧。

發現問題

之前寫過的一段簡單的demo，后來在IE10以下使用的時候發現無法使用，先上一段代碼

HTML：

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

以上是“IE10以下無法使用img標簽怎么辦”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！