`
化蝶自在飞
  • 浏览: 2333235 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

纯css实现灰色背景层,兼容ie56789&ff&opera&Chrome&Safari

    博客分类:
  • html
阅读更多
纯css实现灰色背景层,兼容ie56789&ff&opera&Chrome&Safari.
基本上通吃浏览器了.实测中兼容ie6,7,ff,其他浏览器没试.
特性:
1、纯CSS实现,支持 IE5.5   6 7   FF Opera Chrome Safari。
2、支持<!DOCTYPE文件头声明。(拉动滚动条仍然居中)。
3、自动遮住select(隐藏)、拉动滚动条仍然居中。
看效果图:



看代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原创:风干的果子,Q群号:29032448 web_前端开发</title>
<style type="text/css">
<!--
html,body {height:100%; margin:0px; font-size:12px;}

.mydiv {
background-color: #FFCC66;
border: 1px solid #f00;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:999;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top:50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/

margin-top:0px;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}


.bg,.popIframe {
background-color: #666; display:none;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=80);/*IE*/
opacity:0.8;/*FF*/
z-index:1;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

} 
.popIframe {
filter:alpha(opacity=0);/*IE*/
opacity:0;/*FF*/
}
--> 
</style>
<script language="javascript" type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('popIframe').style.display='block';
document.getElementById('bg').style.display='block';
}

function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
document.getElementById('popIframe').style.display='none';
}

</script>
</head>
<body>

<div id="popDiv" class="mydiv" style="display:none;">网页设计大本营欢迎你!<br/>Q群号:29032448<br/>
<a href="javascript:closeDiv()">关闭窗口</a></div>
<div id="bg" class="bg" style="display:none;"></div>
<div style="height:1400px; ">
<p>春江花月夜
    唐 张若虚
    
    春江潮水连海平,海上明月共潮生。<br />
    
    
    滟滟随波千万里,何处春江无月明?<br />
    
    江流宛转绕芳甸,月照花林皆似霰。<br />
    
    空里流霜不觉飞,汀上白沙看不见。<br />
    
    江天一色无纤尘,皎皎空中孤月轮。<br />
    
    江畔何人初见月?江月何年初照人?<br />
    
    人生代代无穷已,江月年年只相似。<br />
    
    不知江月待何人,但见长江送流水。<br />
    
    白云一片去悠悠,青枫浦上不胜愁。<br />
    
    谁家今夜扁舟子?何处相思明月楼?<br />
    
    可怜楼上月徘徊,应照离人妆镜台。<br />
    
    玉户帘中卷不去,捣衣砧上拂还来。<br />
    
    此时相望不相闻,愿逐月华流照君。<br />
    
    鸿雁长飞光不度,鱼龙潜跃水成文。<br />
    
    昨夜闲潭梦落花,可怜春半不还家。<br />
    
    江水流春去欲尽,江潭落月复
    <select name="select4" id="select4">
      <option>333</option>
      <option>dddddd</option>
      <option>qqqqqq</option>
    </select>
    西斜。<br />
    
    斜月沉沉藏海雾,碣石潇湘无限路。<br />
    
不知乘月几人归?落花摇情满江树。 </p>
<p><br />
    
    
</p>
<div style="height:100px; line-height:100px; text-align:center; background:#FFFFCC;">
<a href="javascript:showDiv()">点我,弹出层</a>
2
<select name="select" id="select">
<option>333</option>
<option>dddddd</option>
<option>qqqqqq</option>
</select>
</div>

<p>春天的江潮水势浩荡,与大海连成一片,一轮明月从海上升起,好
<select name="select3" id="select3">
    <option>333</option>
    <option>dddddd</option>
    <option>qqqqqq</option>
</select>
像与潮水一起涌出来。<br />
    月光照耀着春江,随着波浪闪耀千万里,什么地方的春江没有明亮的月光。<br />
    江水曲曲折折地绕着花草丛生的原野流淌,月光照射着开遍鲜花的树林好像细密的雪珠的闪烁。<br />
    月光象白霜一样从空中流下,感觉不到它的飞翔,它照得江畔的白沙看不见。<br />
    江水、天空成一色,没有些微灰尘,只有明亮的一轮孤.收集整理:<a href="http://www.k686.com">k686绿色软件</a>
    <select name="select2" id="select2">
      <option>333</option>
      <option>dddddd</option>
      <option>qqqqqq</option>
    </select>
   </div>
<iframe id='popIframe' class='popIframe' frameborder='0' ></iframe>
</body>
</html>


看掌声.呵呵.转载的,这个比较强大,浏览器支持很好.
很多人说放弃ie6,怎么说呢,ie6的市场份额还是绝对不允许忽略的.看图:



看了这图,还打算放弃ie6的话,那,除非你是大头,像Google那样的大头.
  • 大小: 127.3 KB
  • 大小: 80 KB
分享到:
评论
1 楼 zachary.guo 2010-05-13  
又来拍砖了,哈哈,开个玩笑咯~~~

注意你的网页,有滚动条,对不?你的灰色层是想挡住后面的页面,使其不能操作,对不?可是我仍然可以操作属于 document.body 的滚动条。能否把页面的滚动条也给覆盖?

相关推荐

    圆角效果 在IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0通过

    本文将详细讨论如何在不同浏览器中,特别是IE5.5至IE8及Firefox 3、Thunderbird(TT)、Maxthon 2.1.5、Opera 9.6和Safari 4.0中实现纯CSS的圆角效果。 首先,我们来看CSS3中的border-radius属性,这是实现圆角效果...

    浏览器兼容.doc-CSS hack姐姐兼容性问题

    由于不同的浏览器使用了不同的渲染引擎(或称为内核),例如Mozilla Firefox使用Gecko,Internet Explorer使用Trident,Opera使用Presto,Safari和Google Chrome使用WebKit,它们对CSS规范的实现存在差异,导致在...

    js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本

    这篇文章主要介绍了使用JavaScript代码如何判断当前用户使用的浏览器种类(IE、Firefox、Opera、Safari、Chrome)以及它们的版本。以下是详细介绍: ### 判断浏览器种类及版本的方法 #### 方法一:只区分浏览器...

    CSS实现table td中文字的省略与显示(兼容IE与FF、Chrome)

    在本文中,我们将详细探讨如何使用CSS3中的几个属性来实现这一功能,并确保兼容多种主流浏览器,包括IE、Firefox(FF)和Chrome。 首先,为了实现文字的省略效果,我们需要设置几个CSS属性。最核心的属性包括`...

    div的圆角的制作,兼容FF, IE等浏览器

    在本主题中,我们将深入探讨如何使用CSS技术为`div`元素创建圆角,同时确保这种效果在Firefox(FF)和Internet Explorer(IE)等不同浏览器上都能良好地兼容。 1. CSS3边框半径属性 CSS3引入了`border-radius`属性...

    同浏览器CSS样式兼容问题

    除了上述方法,还可以考虑使用CSS前缀,如`-webkit-`、`-moz-`、`-ms-`、`-o-`等,这些前缀分别对应Chrome/Safari、Firefox、IE和Opera浏览器,以确保特定CSS功能在各个浏览器中的兼容性。 此外,使用CSS预处理器...

    css浏览器兼容问题

    在IE6-7中,设置`text-align: center`会使文本及嵌套块元素居中,但在FF、Opera、Safari、IE8中,只有文本居中。为使块元素居中,应使用`margin: 0 auto;`。 3. **垂直居中问题**: `vertical-align: middle;`在...

    兼容各浏览器css渐变

    对于基于WebKit内核的浏览器(如Safari、Chrome等),可以使用前缀`-webkit-`来实现渐变效果: 1. **线性渐变**: ```css #gradient { background: -webkit-linear-gradient(top, #ff6600, #339900); } ``` ...

    最新web面试题css浏览器的兼容性问题.docx

    不同的浏览器,尤其是IE系列与其他现代浏览器(如Firefox、Chrome、Safari和Opera),在解析CSS规则时可能存在差异,导致页面显示效果不一致。以下是一些关于CSS浏览器兼容性的关键知识点: 1. **对齐文本和文本...

    css hack div 布局

    针对Opera、Safari和Chrome,我们可以使用媒体查询(Media Queries)来实现兼容性: ```css .qq { background: #000; /* IE FF */ } @media all and (min-width: 0px) { .qq { background: #000; /* Opera、...

    js操作XML文件(兼容FF,IE)

    - Firefox, Chrome, Safari, Opera等现代浏览器: ```javascript var parser = new DOMParser(); var xml = parser.parseFromString(xmlString, "text/xml"); ``` 2. **XML文档加载和解析**: 加载XML文件后,...

    兼容IE与firefox的css 线性渐变(linear-gradient)

    要实现一个在IE和Firefox浏览器中都兼容的CSS线性渐变效果,可以通过针对不同的浏览器使用不同的属性和语法。在本例中,主要讨论的是在Web页面中创建垂直和水平的渐变背景色,并且提供了一系列浏览器的兼容性写法。 ...

    让IE支持CSS3的不完全兼容方案

    标题中的“让IE支持CSS3的不完全兼容方案”指的是针对Internet Explorer(尤其是早期版本)对CSS3标准不完全支持的问题,所采取的一种通过特定技术手段实现部分CSS3特性的方法。IE浏览器在CSS3规范刚推出时,尤其是...

    web前端规范之CSSHack.pdf

    Webkit阵型则涵盖Firefox、Chrome、Safari和Opera等,它们遵循更现代的CSS标准。 **国内与国外的浏览器使用情况** 在中国,由于历史原因,Windows操作系统和IE浏览器的广泛使用导致大部分用户倾向于使用基于IE内核...

    禁止选中文字兼容IE、Chrome、FF等

    本文将详细讲解如何实现跨浏览器的禁止选中文字功能,确保兼容IE、Chrome、Firefox(FF)等主流浏览器。 首先,我们可以使用JavaScript的jQuery库来实现这一功能。通过以下代码,可以给指定元素(假设为`el`)添加...

    浏览器共存(ie6,ie7 ff)

    4. **采用CSS前缀**:针对不同浏览器对新特性的支持情况,使用特定的前缀,如 `-webkit-` (Chrome 和 Safari), `-moz-` (Firefox), `-ms-` (IE), `-o-` (Opera)。 5. **使用polyfill库**:为不支持某些新特性的...

    浏览器兼容性

    } /* Chrome/Safari支持此处填写Chrome的css */ } ``` 以上代码通过不同的前缀或媒体查询实现了针对不同浏览器的样式调整。例如,`*color`仅被IE6和IE7识别,而`_color`则只被IE6识别。此外,通过特定的媒体查询...

    css教程实现div背景色渐变色代码分享

    3. **CSS 前缀**:为了确保 CSS 属性在不同浏览器中的兼容性,开发者通常会在 CSS3 属性前添加特定的前缀,如 `-moz-` 对应 Firefox、`-webkit-` 对应 Chrome/Safari、`-o-` 对应 Opera。 #### 三、示例代码分析 ...

    【css新增特性思维导图梳理】

    例如,`-webkit-` 适用于 Chrome 和 Safari,`-moz-` 用于 Firefox,`-ms-` 为 IE,`-o-` 代表 Opera。正确书写顺序是先写兼容性写法,然后放标准写法。例如: ```css -webkit-transform: rotate(-3deg); -moz-...

Global site tag (gtag.js) - Google Analytics