ie10兼容问题 -- 将div定位absolute在图片img上面,导致div点击事件无效
ie10兼容问题:
将div定位absolute在图片img上面,发现div若不加背景色,导致div点击事件(任何事件)无效。
<div class="paper-box">
<div class="red-paper">
<img class="company-uk-packet" src="./images/uk-bag.png" alt="">
</div>
<div class="hand-hot"></div>
</div>
解决办法:
1、给div本身加透明背景色(前提是该div里没有内容,否则内容也会被透明)
.hand-hot{
position: absolute;
width:220px;
height: 54px;
bottom:22px;
left:102px;
cursor: pointer;
background: #fff;
opacity: ;
}
2、将img换成背景图
.red-paper{
width:430px;
height: 430px;
background: url('../images/uk-bag.png') no-repeat center center;
}
.hand-hot{
position: absolute;
width:220px;
height: 54px;
bottom:22px;
left:102px;
cursor: pointer;
}
ie10兼容问题 -- 将div定位absolute在图片img上面,导致div点击事件无效的更多相关文章
- 部分iphone手机上的div的点击事件无效
最近在做一个手机移动端的项目,Andrio手机和部分iphone手机上点击事件都是好的,只有在老的型号上的iphone手机上点击事件无效果. 后来在网上查了很多资料,发现有加样式cursor:poin ...
- absolute 导致点击事件无效
方案一: 添加层数 z-index 方案二: 背景的透明度为0 background-color:#000; filter:alpha(opacity=0); opacity:0;
- IE DIV背景透明,点击事件不响应解决方案
IE DIV背景透明,给DIV绑定点击事件, 当点击DIV时,不会响应已经绑定的点击事件. 解决方案是给DIV的设置以下样式. background-image: url(data:image/gif ...
- div定位relative和absolute测试1
div里的position定位也是比较常见的,relative是相对定位,absolute是绝对定位.如本文测试:body自带8px的margin,这里不对其进行清空.蓝色的div和红色的div分别设 ...
- div定位relative和absolute测试2
之前的博文:div定位relative和absolute测试1.中,body包含了蓝色和红色div,蓝色的相对定位,相对于body向下偏移了10px位置,红色绝对定位,相对浏览器偏移了10px位置. ...
- div定位relative和absolute和float测试3
position等于absolute的时候,不一定是相对于浏览器定位,当div存在包含关系时,父div设置成relative,其中包含的div设置成absolute就是相对于该父div的了.该文测试了 ...
- 网页制作过程中div定位的三个问题
这几天要做单位的网站,对于做网站我也不怎么样,于是我便在网上参考了一个比较满意的网站,套一下来把这个工作结束了.在此期间遇到了三个关于div定位问题, 一般网站用div布局时都是从上到下分head . ...
- html中div定位练习
html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定, ...
- div定位
1.float定位带来的问题<html> <head> <title>div浮动引发的问题</title> </head> <styl ...
随机推荐
- c++函数相关
1,内连函数 inline 返回值类型 函数名(形参列表) 普通函数成为内连函数:在普通函数声明之前加上inline 成员函数成为内连函数:在类中定义的函数全部默认为内连函数,可以显示加上inline ...
- js的浅拷贝和深拷贝和应用场景
为什么会用到浅拷贝和深拷贝 首先来看一下如下代码 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e ...
- 分布式工作流任务调度系统Easy Scheduler正式开源
分布式工作流任务调度系统Easy Scheduler正式开源 1.背景 在多位技术小伙伴的努力下,经过近2年的研发迭代.内部业务剥离及重构,也经历一批种子用户试用一段时间后,EasyScheduler ...
- js实现两个从input获取到的数字相加引发的问题
从input中获取到的数据是文本类型的,如果不转化类型直接相加会变成字符串的相加. 使用Number()函数可以解决这个问题,如下 var c = Number(a) + Number(b)
- python-接口开发flask模块(一)工具类准备
我们常常听说测试http接口.测试java接口,测试socket接口等等:那么python这么强大的语言当然也可以用来开发接口了. flask模块介绍: python中用来开发接口的模块:flask, ...
- Openstack_单元测试工具 tox
目录 目录 扩展阅读 Openstack 的单元测试工具 单元测试工具使用流程 tox toxini 参考文章 扩展阅读 Python Mock的入门 Openstack 的单元测试工具 unitte ...
- delphi DLL image 动态绘图 句柄处理
在调用DLL 动态在T Image 绘图时,传入 Image.Canvas.Handle 后,却总是绘不上,有时偶尔能绘上,却没搞清原因,而同样的代码,传入窗体的 Handle ,绘图却正常. 经过 ...
- spotlight监控mysql性能
spotlight可以监控mysql性能,同监控linux一样配置 目录 1.安装spotlight 2.参数认识 1.安装spotlight spotlight不仅仅只是监控mysql,还可以完成数 ...
- C# 打印倒三角
void test6(int num) { try { #region 方法1 int maxstar = (num - 1) * 2 + 1; string line = ""; ...
- java 多线程并发问题总结
java 多线程并发主要通过关键字synchronized实现 Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问 ...