手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css div实现的遮罩层完美兼容IE6-IE9 FireFox
css div实现的遮罩层完美兼容IE6-IE9 FireFox
摘要:Html代码:数据加载中,请稍后...CSS样式:/*loading加载遮罩层css*/#black_overlay{position:fi...

Html代码:

<div id="black_overlay"></div>

<div id="load_content" >

<div>

<img src="images/progressBar.gif" />

</div>

<div>数据加载中,请稍后...</div>

</div>

CSS样式:

/*loading加载遮罩层css*/

#black_overlay

{

position: fixed;

z-index: 1000;

width: 100%;

height: 100%;

top: 0;

left: 0;

filter: alpha(opacity=80);

opacity: 0.8;

overflow: hidden;

background-color: #000;

}

*html

{

background: url(*) fixed;

}

*html body

{

margin: 0;

height: 100%;

}

/*IE6*/

*html #black_overlay

{

position: absolute;

left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);

top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);

}

#load_content

{

display: none;

position: absolute;

top: 40%;

left: 40%;

width: 200px;

height: 50px;

border: 16px solid #FFF;

border-bottom: none;

background-color: white;

z-index: 1002;

overflow: auto;

font-size: 14px;

font-weight: bold;

}

效果图:

IE6:

1

其他版本效果:就不一一贴图了。

2

【css div实现的遮罩层完美兼容IE6-IE9 FireFox】相关文章:

div标签中的元素margin-top失效的解决方法

巧用CSS3 border实现图片遮罩效果代码

css实现连续的英文或数字自动换行的方法

一款纯css3实现的动画加载导航

CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

用css样式表实现首字大写

CSS兼容:如何兼容IE7和IE8-Div+CSS教程

一款css实现的鼠标经过按钮的特效

css去除点击链接时出现的虚线框

子div在父div的相对定位css控制

精品推荐
分类导航