關於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: 20008:008 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; = 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武林網的支持。