關(guān)于IE10以下的img標(biāo)簽問題解決
發(fā)布時(shí)間：2018-07-02 17:14:01 作者：LiuDongpei 
我要評(píng)論
我要評(píng)論這篇文章主要給大家介紹了關(guān)于IE10以下的img標(biāo)簽問題的解決方法，文中給大家介紹了兩種解決方法，大家可以根絕自己的情況選擇合適代碼解決該問題，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
發(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>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
img標(biāo)簽src屬性值為空時(shí)2次請(qǐng)求問題(非ie瀏覽器)
以前應(yīng)該有同學(xué)遇到過類似的情況, 當(dāng)有一個(gè)類似如 img src=’’ 的標(biāo)簽時(shí), 會(huì)對(duì)頁面多出一次請(qǐng)求，接下來以實(shí)驗(yàn)的方式加以驗(yàn)證，感興趣的你可不要錯(cuò)過了哈，希望本文提供的2013-02-16IE下元素空白區(qū)域(該元素在上img在下)與圖片重疊無法觸發(fā)鼠標(biāo)事件
IE 下與元素重疊的區(qū)域?yàn)閕mg（該元素在上img在下),且該元素?zé)o背景,則該區(qū)域無法觸發(fā)鼠標(biāo)事件,很是郁悶，與大家分享下，不知有沒有更好的解決方法2013-01-18- 在進(jìn)行頁面的DIV+CSS排版時(shí)，遇到IE6（當(dāng)然有時(shí)Firefox下也會(huì)偶遇）瀏覽器中的圖片元素img下出現(xiàn)多余空白的問題絕對(duì)是常見的對(duì)于該問題的解決方法也是“見機(jī)行事”，根據(jù)原2011-07-27
- 嗯，開場(chǎng)先胡扯幾句不相關(guān)地感言。最近的工作讓我有了很多實(shí)踐的機(jī)會(huì)，同時(shí)也讓我收獲頗豐。在群里聊天的時(shí)候也提到過，所有的學(xué)習(xí)過程，最好是理論－實(shí)踐－再理論－再實(shí)踐2009-06-13
- 網(wǎng)頁制作Webjx文章簡(jiǎn)介：在進(jìn)行頁面的DIV CSS排版時(shí)，遇到IE6（當(dāng)然有時(shí)Firefox下也會(huì)偶遇）瀏覽器中的圖片元素img下出現(xiàn)多余空白的問題絕對(duì)是常見的對(duì)于該問題的解決方法2009-04-02
在IE流覽器中正確顯示PNG透明圖片-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
png圖片有很好的品質(zhì)。陰影效果也不會(huì)有雜邊,很流暢。如果插入網(wǎng)頁的話可以給網(wǎng)站內(nèi)容增色不少!更重要的是在不增加圖片容量大小的情況下提高了頁面的圖片的質(zhì)量。對(duì)于2008-10-17