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>

　　然后再把樣式修改好，最后也是可以解決問題