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点击事件无效的更多相关文章

  1. 部分iphone手机上的div的点击事件无效

    最近在做一个手机移动端的项目,Andrio手机和部分iphone手机上点击事件都是好的,只有在老的型号上的iphone手机上点击事件无效果. 后来在网上查了很多资料,发现有加样式cursor:poin ...

  2. absolute 导致点击事件无效

    方案一: 添加层数 z-index 方案二: 背景的透明度为0 background-color:#000; filter:alpha(opacity=0); opacity:0;

  3. IE DIV背景透明,点击事件不响应解决方案

    IE DIV背景透明,给DIV绑定点击事件, 当点击DIV时,不会响应已经绑定的点击事件. 解决方案是给DIV的设置以下样式. background-image: url(data:image/gif ...

  4. div定位relative和absolute测试1

    div里的position定位也是比较常见的,relative是相对定位,absolute是绝对定位.如本文测试:body自带8px的margin,这里不对其进行清空.蓝色的div和红色的div分别设 ...

  5. div定位relative和absolute测试2

    之前的博文:div定位relative和absolute测试1.中,body包含了蓝色和红色div,蓝色的相对定位,相对于body向下偏移了10px位置,红色绝对定位,相对浏览器偏移了10px位置. ...

  6. div定位relative和absolute和float测试3

    position等于absolute的时候,不一定是相对于浏览器定位,当div存在包含关系时,父div设置成relative,其中包含的div设置成absolute就是相对于该父div的了.该文测试了 ...

  7. 网页制作过程中div定位的三个问题

    这几天要做单位的网站,对于做网站我也不怎么样,于是我便在网上参考了一个比较满意的网站,套一下来把这个工作结束了.在此期间遇到了三个关于div定位问题, 一般网站用div布局时都是从上到下分head . ...

  8. html中div定位练习

    html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定, ...

  9. div定位

    1.float定位带来的问题<html> <head> <title>div浮动引发的问题</title> </head> <styl ...

随机推荐

  1. c++函数相关

    1,内连函数 inline 返回值类型 函数名(形参列表) 普通函数成为内连函数:在普通函数声明之前加上inline 成员函数成为内连函数:在类中定义的函数全部默认为内连函数,可以显示加上inline ...

  2. js的浅拷贝和深拷贝和应用场景

    为什么会用到浅拷贝和深拷贝 首先来看一下如下代码 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e ...

  3. 分布式工作流任务调度系统Easy Scheduler正式开源

    分布式工作流任务调度系统Easy Scheduler正式开源 1.背景 在多位技术小伙伴的努力下,经过近2年的研发迭代.内部业务剥离及重构,也经历一批种子用户试用一段时间后,EasyScheduler ...

  4. js实现两个从input获取到的数字相加引发的问题

    从input中获取到的数据是文本类型的,如果不转化类型直接相加会变成字符串的相加. 使用Number()函数可以解决这个问题,如下 var c = Number(a) + Number(b)

  5. python-接口开发flask模块(一)工具类准备

    我们常常听说测试http接口.测试java接口,测试socket接口等等:那么python这么强大的语言当然也可以用来开发接口了. flask模块介绍: python中用来开发接口的模块:flask, ...

  6. Openstack_单元测试工具 tox

    目录 目录 扩展阅读 Openstack 的单元测试工具 单元测试工具使用流程 tox toxini 参考文章 扩展阅读 Python Mock的入门 Openstack 的单元测试工具 unitte ...

  7. delphi DLL image 动态绘图 句柄处理

    在调用DLL 动态在T Image 绘图时,传入  Image.Canvas.Handle 后,却总是绘不上,有时偶尔能绘上,却没搞清原因,而同样的代码,传入窗体的 Handle ,绘图却正常. 经过 ...

  8. spotlight监控mysql性能

    spotlight可以监控mysql性能,同监控linux一样配置 目录 1.安装spotlight 2.参数认识 1.安装spotlight spotlight不仅仅只是监控mysql,还可以完成数 ...

  9. C# 打印倒三角

    void test6(int num) { try { #region 方法1 int maxstar = (num - 1) * 2 + 1; string line = ""; ...

  10. java 多线程并发问题总结

    java 多线程并发主要通过关键字synchronized实现 Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问 ...