IE10以下无法使用img标签怎么办-创新互联

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

成都创新互联公司成都网站建设按需求定制网站,是成都网站营销公司,为成都被动防护网提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站建设热线:13518219792

发现问题

之前写过的一段简单的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://bzwzjz.com/article/dggooi.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 盐亭网站设计 成都网站建设 LED网站设计方案 成都网站制作 公司网站建设 定制级高端网站建设 成都企业网站设计 企业网站建设公司 网站设计 高端网站建设 成都网站制作 成都网站建设 网站制作 温江网站设计 成都网站设计 营销网站建设 成都网站建设 网站建设 高端网站设计推广 成都网站制作 成都网站制作 成都网站制作