关于在IE中a标签设置绝对定位和宽高之后却点击没有反应的解决方案
2013-09-12 22:26
435 查看
最近做了一个页面,是一张大的背景图,在背景图上面有几个表单元素,代码结构大致如下:
DIV使用相对定位,表单元素使用绝对定位。
后来产品希望背景图能点击,于是在在背景图上面加了一个超链接a,代码如下:
后来测试发现在IE下面点击无响应。其它浏览器没事。
在试验了无数种方式之后,还是不行,最后求助于百度,于是找到了答案。
以下是从网上摘录下来的部分,为了防止以后再遇到此类问题,也为了怕自己忘记,特此记录一下。
造成问题的原因如下:
元素绝对定位以后设置了高宽等原因:
1、元素内并无内容
2、背景是透明的,无任何背景图或者颜色
解决方法:
1、如果不是绝对定位元素的,可以用相对定位
2、给元素加透明的背景图,或者给元素加背景颜色,然后设置透明度为0
3、IE可以只用 background:url(about:blank) 解决
第三种方法平时用用是可以的,但是在某种情况下会有bug, 比如JS拖动层时候,拖动的
事件在一个透明层上面,你有设置了其他鼠标光标,这时候拖动就会出现光标闪烁的现象!
这里建议第二种方法,弄一个1*1PX的透明图就好!
<div class="huishi" id="form1" style="background:url(images/huishi_bg.png) no-repeat;"> <input type="text" value="" name="year" id="year"/> <input type="text" value="" name="month" id="month"/> <input type="text" value="" name="day" id="day"/> </div>
DIV使用相对定位,表单元素使用绝对定位。
后来产品希望背景图能点击,于是在在背景图上面加了一个超链接a,代码如下:
<div class="huishi" id="form1" style="background:url(images/huishi_bg.png) no-repeat;"> <a href="http://www.baidu.com/" target="_blank" style="display:block; width:555px; height:395px; position:absolute; left:0; top:0; z-index:0;"></a> <input type="text" value="" name="year" id="year"/> <input type="text" value="" name="month" id="month"/> <input type="text" value="" name="day" id="day"/> </div>
后来测试发现在IE下面点击无响应。其它浏览器没事。
在试验了无数种方式之后,还是不行,最后求助于百度,于是找到了答案。
以下是从网上摘录下来的部分,为了防止以后再遇到此类问题,也为了怕自己忘记,特此记录一下。
造成问题的原因如下:
元素绝对定位以后设置了高宽等原因:
1、元素内并无内容
2、背景是透明的,无任何背景图或者颜色
解决方法:
1、如果不是绝对定位元素的,可以用相对定位
2、给元素加透明的背景图,或者给元素加背景颜色,然后设置透明度为0
3、IE可以只用 background:url(about:blank) 解决
第三种方法平时用用是可以的,但是在某种情况下会有bug, 比如JS拖动层时候,拖动的
事件在一个透明层上面,你有设置了其他鼠标光标,这时候拖动就会出现光标闪烁的现象!
这里建议第二种方法,弄一个1*1PX的透明图就好!
相关文章推荐
- IE下当a标签使用position:absolute绝对定位时没有点击区域的bug
- IE中a标签绝对定位设置高宽却无法点击的问题
- A标签绝对定位后IE下不可点击问题
- 关于IE中超链接绝对定位无法识别点击区域
- IE8下eWebEditor点击没有反应的解决方案
- 关于IE中超链接绝对定位无法识别点击区域
- 关于绝对定位后元素(a标签)无法点击
- 关于ubuntu16.4 中安装最新的eclipse或者是STS出现页面特卡,且新建项目没有提示,preference选项中点击左侧标签右侧没反应的解决办法,参照google, 排版不太好,希望对一些小伙伴有所帮助
- 关于iOS地图定位中点击设置->隐私->定位服务 闪退问题
- android popup设置为不可点击后,按keyback也没有反应了?
- 关于iOS地图定位中点击设置->隐私->定位服务 闪退问题
- 关于JSP页面点击按钮没反应,方法没有执行的检查
- 绝对定位 jquery点击收起,点击显示的标签效果
- 关于ie6中绝对定位或浮动的div中既有向左float也有向右float时候如何让外层div自适应宽度的解决方案--
- [已解决] PopupWindow 弹出后点击屏幕任何地方都没有反应了,PopupWindow弹出之后,怎么点击外面取消不了
- 关于oracle的那些坑(c3p0连接池死锁 APPARENT DEADLOCK,druid没有反应,然后pl/sql登陆很慢,之后正常)
- 关于iis中的网站,在ie下点击服务器控件无反应的问题
- 关于oracle的那些坑(c3p0连接池死锁 APPARENT DEADLOCK,druid没有反应,然后pl/sql登陆很慢,之后正常)
- 关于xp+ie7下,执行confirm会出现点击取消也执行submit的问题解决方案
- 关于java JDK安装(已经设置好了配置 命令行却输入javac却没有反应)