之前写过的一段简单的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:;
top:;
cursor: pointer;
}
#down{
top: auto;
bottom:;
}

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>

  然后再把样式修改好,最后也是可以解决问题

IE10一下的img标签问题的更多相关文章

  1. CVE-2013-2551漏洞成因与利用分析(ISCC2014 PWN6)

    CVE-2013-2551漏洞成因与利用分析 1. 简介 VUPEN在Pwn2Own2013上利用此漏洞攻破了Win8+IE10,5月22日VUPEN在其博客上公布了漏洞的细节.它是一个ORG数组整数 ...

  2. JS中关于位置和尺寸的api

    HTMLElement.offsetParent 由于offsetTop 和 offsetLeft 都是相对于 offsetParent 内边距边界的,故offsetParent的意义十分重大.off ...

  3. HTMLElement.offsetParent(offsetLeft和offsetTop参照offsetParent的内边距边界)

    IE7以上(不是火狐): 父级没有定位: 本身没有定位: ==> offsetParent:body 本身定位为:absolute/relative: ==> offsetParent:b ...

  4. css美化select标签,兼容ie10 ie10+,chrome。但不支持ie9 ie9-

    让ie9 ie9+ 和非ie的浏览器加载这个hack.ie8,ie8- 就用自己的默认样式 <!-- email:416960428@qq.com author:李可 --> <!- ...

  5. IE10以下的IE浏览器在form表单提交、a标签等场景下,接收application/json类型的响应时,会提示是否要下载该json文件

    IE10以下的IE浏览器并不支持application/json这种response格式,所以需要在服务端先将对象转成json字符串然后,设置Content-Type为text/html的类型,再返回 ...

  6. IE10用video标签播放本地mp4文件失败的解决办法

    1. 首先用“格式工厂”将要播放的视频文件按照“AVC高质量与大小”转换为要求格式的mp4文件: 2. 设置IIS7.5,添加mp4的MIME类型,步骤如下: 1.打开IIS管理器(运行inetmgr ...

  7. meta 标签代码解决IE兼容问题,IE6,IE7,IE8,IE9,IE10(包括360的兼容模式)

    最近做了一个项目,客户反映,在360下布局错位,远程调试了一下,发现客户使用的是360的兼容模式,然而我在自己的电脑上测试的时候是正常的(兼容模式也正常):简单研究了一下360的兼容模式,在360的兼 ...

  8. a标签绝对定位,点击区域被图片遮挡(IE下)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 关于input标签和placeholder在IE8,9下的兼容问题

    一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...

随机推荐

  1. 常用MySQL命令整理

    备份数据库 #.备份数据库到sql文件 mysqldump --add-drop-database -h localhost -uusername ppassword dbname > dbna ...

  2. 安装sass并ruby更改淘宝镜像

    一.安装ruby 去官网下载ruby安装(注意:安装的时候选择第二项变量环境安装add ruby executables to your PATH) 二.安装完成后 在windows左下角打开所有应用 ...

  3. IP验证正则表达式

    Regex r = new Regex(@"^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$" ...

  4. excel解析二维数组结构的excel

    public void fileImport(Ufile ufile) throws Exception { String filePath = ufile.getFilePath(); List&l ...

  5. [Tomcat 源码分析系列] (二) : Tomcat 启动脚本-catalina.bat

    概述 Tomcat 的三个最重要的启动脚本: startup.bat catalina.bat setclasspath.bat 上一篇咱们分析了 startup.bat 脚本 这一篇咱们来分析 ca ...

  6. 关于nagios监控远程服务器对服务器性能影响的测试

    1.    Nagios监视远程服务器时,是通过在控制端执行以下命令进行数据收集的: /usr/local/nagios/libexec/check_http -I 192.168.16.11 /us ...

  7. js 赋值 要用 toString() ; 太坑了。

    js 赋值 要用 toString() ;     太坑了. js 赋值 要用 toString() ;     太坑了. js 赋值 要用 toString() ;     太坑了.

  8. APP测试之登录

    我们公司产品登录很简单 手机号为账号,每次登录输入短信验证码.验证码为6位数字.登陆后可以记录登录状态.未登录时可以微信登录然后验证或者APP登录后可以在个人中心绑定微信. 一APP内部登录 1.手机 ...

  9. U-Mail邮件网关提醒:谨防像素图片钓鱼窃密

    垃圾邮件和病毒的日益猖獗,既因为邮件在商务往来中扮演着越来越重要的角色,也因为犯罪成本低收益高.近年来,不少为非作歹者致力于通过邮件诈骗牟利,想出了种种奇思妙计,导致相关服务商在安全领域逐年加大研发投 ...

  10. DIOCP单元文件应用场景

    diocp.coder.tcpServer是用来做文件传输的 diocp.tcp.server这个是用来做通讯的