發現問題
之前寫過的一段簡單的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>
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
