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);




ie兼容响应式布局的实现总结 和 针对ie浏览器的CSS

参考链接:http://zhidao.baidu.com/link?url=bQioDKMnG_eQoE6dCxzd2hPtMyiB7phu6hBdOupn1Pjk1hV-ItXFZS5GDUBoH5...
  • dmtnewtons
  • dmtnewtons
  • 2014年06月03日 10:02
  • 1324

CSS3选择器,筛选指定的index的元素,兼容IE7+

1.定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 n 可以是数字、关键词或公式。 ul> li>1li> li>2li> ...
  • qq285679784
  • qq285679784
  • 2016年12月29日 18:39
  • 839

兼容IE的完全居中布局

代码详见: https://github.com/screamingColor/save/blob/master/test/center.html IE8下的效果: 本文采用绝对定位和flexbox...
  • screaming_color
  • screaming_color
  • 2016年07月10日 15:24
  • 1548

margin-bottom在IE6和IE7下失效的解决办法

这对于margin-top也同样适用!!! 今天在处理页面边距时,又遇到这个问题,float元素在设定margin-bottom时在IE6和IE7下会失效,之前就碰到过,但是用其他的办法调试会就过去...
  • ximenxiafeng
  • ximenxiafeng
  • 2013年05月01日 00:32
  • 10070

div+css 如何让背景层半透明 内容不透明 并且能兼容ie6,ie7,ie8,ff

用一个大的div来包裹阴影层(半透明div)和p标记,p标记要放在阴影层之外;然后利用position:absolute、z-index、background-color、opacity、filter...
  • sd4015700
  • sd4015700
  • 2015年11月04日 13:39
  • 1394

使用rgba属性兼容IE8

① css3 rgba 即在原本3原色的基础上增加了alpha(透明度)通道,该属性的兼容性如下: 类型 Internet Explorer Firefox Chr...
  • qingmu0803
  • qingmu0803
  • 2014年07月28日 11:40
  • 5543

应用before/after伪类时如何CSS命名以及针对ie6/ie7浏览器兼容

一、诉说前言  before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪...
  • sbt0198
  • sbt0198
  • 2015年06月24日 14:55
  • 1335

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者...
  • accpzgp
  • accpzgp
  • 2014年04月17日 15:43
  • 44584

解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题  百度源代码如下 http://...
  • fuguotao1
  • fuguotao1
  • 2016年07月27日 18:19
  • 2274

ie6, ie7兼容性问题以及处理办法汇总

1、IE6中绝对定位位置错误 问题描述:在ie6中,如果参照物没有触发haslayout ,那么绝对定位的容器的left和bottom就会有问题。 解决办法:在相对定位的父容器上加入 zoom:1 来...
  • zdp072
  • zdp072
  • 2014年03月30日 18:03
  • 3019
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css在用空元素、无内容的元素布局不兼容ie7/8
举报原因:
原因补充:

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