css在用空元素、无内容的元素布局不兼容ie7/8

原创 2015年07月09日 17:45:21

问题环境描述


如图就是简单的一张图片,x的关闭按钮是用i标签来布局实现的, 代码如下:

html:

<div class="innerWrap">
		<i class="closeBtn" id="closeBtn" title="关闭">关闭</i>
    	<img src="/yxhtWeb/images/social_responsibility/social_responsibility_13pop.png" width="500">
   	</div>

css:

.popBox_13{position:absolute;z-index:1003;top:50%;left:50%;margin:-310px 0 0 -380px;}
    .popBox_13 .innerWrap{position:relative;overflow:hidden;}
    .popBox_13 .innerWrap .closeBtn{display:block;overflow:hidden;text-indent:-99999px;position:absolute;z-index:1003;top:0;right:0;width:52px;height:52px;cursor:pointer;}
js:

$('.popBox_13 .closeBtn').click(function(){
			$('#mask').hide();
			$('.popBox_13').hide();
		});
在高级浏览器 点击关闭按钮是正常的,但是在ie7/8下就有问题,无法关闭

解决办法有2种:

1、给a标签添加样式:background:url(about:blank);
2、给a标签随便添加背景色或者背景图片,然后将a标签的透明度设置为0,不过在IE中需要使用滤镜,即 opacity:0;filter:alpha(opacity=0);




版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

兼容性——IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常

对于此问题,我们通过以下的测试用例来说明。 分析以下代码: 123 一个100x100像素的红色边框 DIV 元素内包含了一个没有设置宽度和高度的蓝色边框的 DIV 元素,...

div+css 布局下兼容IE6 IE7 FF常见问题

div+css 布局下兼容IE6 IE7 FF常见问题 收藏  所有浏览器 通用 (市面上主要用到的IE6 IE7 FF) height: 100px; IE6 专用  _height: ...

div+css 布局下兼容IE6 IE7 FF常见问题

div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF) height: 100px; IE6 专用 _height: 10...

关于IE7 IE8兼容HTML5和CSS3的一种解决方案

今天突然发现一网站用JS来实现这个支持 添加到head里   excanvas.js //Filament Group modification note...

E6,IE7,IE8,Firefox,Chrome,Safari的CSS hack兼容表

小知识:什么是CSS hack? 由于不同的浏览器,比如IE6、IE7、IE8、Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我...
  • mecho
  • mecho
  • 2011-10-23 12:27
  • 400

CSS兼容IE6,,IE7,I8 FIREFOX

IE6IE7IE8(Q) 中元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'

问题描述 IE 中触发了 hasLayout 的容器同时使用 'clear' 特性清除浮动在某些情况下导致 'padding-top' 渲染异常。 造成的影响 此问题会导致出现多余的 'pa...

ie6,ie7,ie8 css bug兼容解决记录

断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决 ,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)