IE10以下无法使用img标签怎么办

这篇文章主要为大家展示了“IE10以下无法使用img标签怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“IE10以下无法使用img标签怎么办”这篇文章吧。

成都创新互联专注于企业全网营销推广、网站重做改版、定日网站定制设计、自适应品牌网站建设、html5商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为定日等各大城市提供网站开发制作服务。

发现问题

之前写过的一段简单的demo,后来在IE10以下使用的时候发现无法使用,先上一段代码

HTML:


    
    
    

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外面来


       
    
    

以上是“IE10以下无法使用img标签怎么办”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


文章标题:IE10以下无法使用img标签怎么办
转载来于:http://scyanting.com/article/pggpjg.html

其他资讯