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 ...
随机推荐
- Jmeter -- 参数化(函数助手和CSV数据文件配置)
使用场景: 例如:模拟多用户登陆时 参数化两种方式: 方式一:使用函数助手 1. 创建包含多个登录名和密码的文件 可以在文本编辑器中输入,格式如下: username,passwordusername ...
- POJ 1625 Censored ( Trie图 && DP && 高精度 )
题意 : 给出 n 个单词组成的字符集 以及 p 个非法串,问你用字符集里面的单词构造长度为 m 的单词的方案数有多少种? 分析 :先构造出 Trie 图方便进行状态转移,这与在 POJ 2278 中 ...
- laravel中model类中好用的方法
public function field() { return $this->belongsTo(HrmAuthFieldsModel::class, 'filed_id', 'id'); } ...
- ssm的自动类型转换器
1.jsp页面将String 转换成employee类型 <form action="testConversionServiceConverer" method=" ...
- leetcode 138. Copy List with Random Pointer复杂链表的复制
python代码如下: # Definition for singly-linked list with a random pointer. # class RandomListNode(object ...
- 分布式任务队列 Celery —— 深入 Task
目录 目录 前文列表 前言 Task 的实例化 任务的名字 任务的绑定 任务的重试 任务的请求上下文 任务的继承 前文列表 分布式任务队列 Celery 分布式任务队列 Celery -- 详解工作流 ...
- 阶段3 1.Mybatis_09.Mybatis的多表操作_3 完成account的一对一操作-通过写account的子类方式查询
先把多表查询的sql语句写出来 想要显示的字段 创建一个AccountUser类 继承Account.这样它就会从父类上继承一些信息 这里只需要定义username和address就可以了 .然后生成 ...
- WPF 带有提示文本的透明文本框
<TextBox Text="{Binding SearchInfo, UpdateSourceTrigger=PropertyChanged}" Grid.Row=&quo ...
- linux iptables相关
iptables -A INPUT -p udp --dport 90 -j ACCEPT iptables -A INPUT -p tcp -m state --state ESTABLISHED ...
- Nginx 配置文件 nginx.conf 详解
Nginx的配置文件nginx.conf配置详解如下: user nginx nginx; #Nginx用户及组:用户 组.window下不指定 worker_processes 8; #工作进程:数 ...