這篇文章主要為大家展示了“IE10以下無法使用img標(biāo)簽怎么辦”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“IE10以下無法使用img標(biāo)簽怎么辦”這篇文章吧。

成都創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、定日網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為定日等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

發(fā)現(xiàn)問題

之前寫過的一段簡(jiǎn)單的demo，后來在IE10以下使用的時(shí)候發(fā)現(xiàn)無法使用，先上一段代碼

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

實(shí)現(xiàn)的效果就是當(dāng)鼠標(biāo)移動(dòng)到上面span的時(shí)候，圖片向上移動(dòng)，移動(dòng)到下面span的時(shí)候，圖片向下移動(dòng)，離開則停止。

然而在IE10以下版本鼠標(biāo)移上span的時(shí)候沒有任何效果。

進(jìn)過多次測(cè)試，發(fā)現(xiàn)了兩種解決辦法

方法一：

進(jìn)過測(cè)試發(fā)現(xiàn)如果給span加上背景顏色的話， 鼠標(biāo)移上又有效果了

增加代碼：

 background: #fff;
 opacity: 0;
 filter:alpha(opacity=0);

添加背景色，然后設(shè)置為透明，因?yàn)閛pacity有兼容問題，所以加上filter，最后效果和之前完全一樣

方法二：

后來問了朋友，說是img標(biāo)簽在IE10嵌套以下會(huì)有，所以把img標(biāo)簽放到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標(biāo)簽怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標(biāo)題名稱：IE10以下無法使用img標(biāo)簽怎么辦
標(biāo)題來源：http://chinadenli.net/article26/pggpjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、App開發(fā)、ChatGPT、小程序開發(fā)、網(wǎng)站策劃、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)