IE10一下的img标签问题
之前写过的一段简单的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标签问题的更多相关文章
- CVE-2013-2551漏洞成因与利用分析(ISCC2014 PWN6)
CVE-2013-2551漏洞成因与利用分析 1. 简介 VUPEN在Pwn2Own2013上利用此漏洞攻破了Win8+IE10,5月22日VUPEN在其博客上公布了漏洞的细节.它是一个ORG数组整数 ...
- JS中关于位置和尺寸的api
HTMLElement.offsetParent 由于offsetTop 和 offsetLeft 都是相对于 offsetParent 内边距边界的,故offsetParent的意义十分重大.off ...
- HTMLElement.offsetParent(offsetLeft和offsetTop参照offsetParent的内边距边界)
IE7以上(不是火狐): 父级没有定位: 本身没有定位: ==> offsetParent:body 本身定位为:absolute/relative: ==> offsetParent:b ...
- css美化select标签,兼容ie10 ie10+,chrome。但不支持ie9 ie9-
让ie9 ie9+ 和非ie的浏览器加载这个hack.ie8,ie8- 就用自己的默认样式 <!-- email:416960428@qq.com author:李可 --> <!- ...
- IE10以下的IE浏览器在form表单提交、a标签等场景下,接收application/json类型的响应时,会提示是否要下载该json文件
IE10以下的IE浏览器并不支持application/json这种response格式,所以需要在服务端先将对象转成json字符串然后,设置Content-Type为text/html的类型,再返回 ...
- IE10用video标签播放本地mp4文件失败的解决办法
1. 首先用“格式工厂”将要播放的视频文件按照“AVC高质量与大小”转换为要求格式的mp4文件: 2. 设置IIS7.5,添加mp4的MIME类型,步骤如下: 1.打开IIS管理器(运行inetmgr ...
- meta 标签代码解决IE兼容问题,IE6,IE7,IE8,IE9,IE10(包括360的兼容模式)
最近做了一个项目,客户反映,在360下布局错位,远程调试了一下,发现客户使用的是360的兼容模式,然而我在自己的电脑上测试的时候是正常的(兼容模式也正常):简单研究了一下360的兼容模式,在360的兼 ...
- a标签绝对定位,点击区域被图片遮挡(IE下)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于input标签和placeholder在IE8,9下的兼容问题
一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...
随机推荐
- 如何定位Sharepoint网站集所在的w3wp进程
方法1. 直接开始运行,输入cmd,再输入iisapp可以列出当前所有IIS中的WebApplication所对应的w3wp.exe进程,后面都有一个进程号标识,在VS中调试的时候附加到对应进 ...
- 前端学习实践笔记--JavaScript深入【2】
趁热继续再来学习一波,接下来主要介绍函数,object,数组,面向对象,new实例化. 在介绍“对象”之前,首先得梳妆打扮一番吧,那这梳妆打扮主要有两条路线,一条是淑女范(利用函数对象化),一条是邻家 ...
- CSS鼠标悬停图片加边框效果,不位移的方法
<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...
- PS1应用之——修改linux终端命令行各字体颜色
最近在学习linux操作系统(CentOS 6 & CentOS 7).觉得linux终端命令行全部为白色,会经常导致命令与输出内容难以分辨.于是上网找到修改linux终端命令行颜色的方法,发 ...
- 使用jxl,poi读取excel文件
作用:在java后台添加一个方法,读取导入的excel内容,根据需要返回相应的sql语句,以完成对临时表的插入操作. 使用jxl读取excel文件 package com.sixthf.bi.sapp ...
- dubbo-admin重新编译后部署出现 valid LOC header (bad signature)异常
前段时间从网上下载dubbo-admin发现在jdk1.7下不可用,后来根据网上说的升级了jar包版本还是有问题,于是观察了编译发现编译时出现类似如下异常: --------------------- ...
- 26 Time Management(转)
01. There is alway time. Time is priorities. 时间常有.时间优先. 02. Days always fill up. 时间总会有的. Only plan f ...
- {POJ}{3988}{Software Industry Revolution}{DP好题}
题意:给定一个字符串d,要求用另一字符串s去匹配,其中s中的?可以为任何字符,*可以为任意个字符,求最小的匹配权值 思路:这题和CSDN英雄会的“反相互”类似,由于其中某些字符的不确定性,利用动态规划 ...
- 编写一个make
一.简介 How to make a "make"?在进行实现前,应该先对make有一个最基本的了解.这里稍作简介:当一个程序的源文件较少时,对其进行修改并重新生成可执行文件并不复 ...
- 制作一个简洁的jquery插件
原文:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401571467&idx=1&sn=08cb00963e6ef ...