之前写过的一段简单的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. 如何定位Sharepoint网站集所在的w3wp进程

     方法1.    直接开始运行,输入cmd,再输入iisapp可以列出当前所有IIS中的WebApplication所对应的w3wp.exe进程,后面都有一个进程号标识,在VS中调试的时候附加到对应进 ...

  2. 前端学习实践笔记--JavaScript深入【2】

    趁热继续再来学习一波,接下来主要介绍函数,object,数组,面向对象,new实例化. 在介绍“对象”之前,首先得梳妆打扮一番吧,那这梳妆打扮主要有两条路线,一条是淑女范(利用函数对象化),一条是邻家 ...

  3. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

  4. PS1应用之——修改linux终端命令行各字体颜色

    最近在学习linux操作系统(CentOS 6 & CentOS 7).觉得linux终端命令行全部为白色,会经常导致命令与输出内容难以分辨.于是上网找到修改linux终端命令行颜色的方法,发 ...

  5. 使用jxl,poi读取excel文件

    作用:在java后台添加一个方法,读取导入的excel内容,根据需要返回相应的sql语句,以完成对临时表的插入操作. 使用jxl读取excel文件 package com.sixthf.bi.sapp ...

  6. dubbo-admin重新编译后部署出现 valid LOC header (bad signature)异常

    前段时间从网上下载dubbo-admin发现在jdk1.7下不可用,后来根据网上说的升级了jar包版本还是有问题,于是观察了编译发现编译时出现类似如下异常: --------------------- ...

  7. 26 Time Management(转)

    01. There is alway time. Time is priorities. 时间常有.时间优先. 02. Days always fill up. 时间总会有的. Only plan f ...

  8. {POJ}{3988}{Software Industry Revolution}{DP好题}

    题意:给定一个字符串d,要求用另一字符串s去匹配,其中s中的?可以为任何字符,*可以为任意个字符,求最小的匹配权值 思路:这题和CSDN英雄会的“反相互”类似,由于其中某些字符的不确定性,利用动态规划 ...

  9. 编写一个make

    一.简介 How to make a "make"?在进行实现前,应该先对make有一个最基本的了解.这里稍作简介:当一个程序的源文件较少时,对其进行修改并重新生成可执行文件并不复 ...

  10. 制作一个简洁的jquery插件

    原文:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401571467&idx=1&sn=08cb00963e6ef ...