css在用空元素、无内容的元素布局不兼容ie7/8
2015-07-09 17:45
627 查看
问题环境描述
如图就是简单的一张图片,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);
相关文章推荐
- CSS3中的calc()
- css 水平居中 垂直居中方法
- css3质感分析(5)径向渐变叠加纹理(圆心可变)
- LESS CSS 框架简介
- css3流动布局
- 如何去掉IE文本框后的那个X css代码
- Button改变样式
- CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)
- 在CSS中,BOX的Padding属性的数值赋予顺序为
- CSS中id和class的区别
- wpf Combobox没有黑三角,鼠标移上去改变样式
- Web前端从入门到精通-5 css简介——css概述和选择器
- CSS word-spacing 属性
- css3选择器
- css3-制作渐变
- css3-变形transforms
- css3-过渡transtition
- css自定义字体(图标)-有些图标不要在P图了
- css3实现网页平滑过渡效果
- 纯CSS绘制mac代码