兼容ie6浏览器窗口四角固定背景代码

昨天有网友提问“如何在html页面四角放置图片”,下面就是答案,供这位网友参考。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>浏览器窗口四角固定背景代码</title>
6 <style type="text/css">
7 html{
8 _overflow:hidden;/*for ie6*/
9 }
10 body {
11 margin:0;
12 padding:0;
13 _height:100%;/*for ie6*/
14 _overflow:auto;/*for ie6*/
15 }
16 .mainbox {
17 position:relative;
18 _position:inherit;/*for ie6*/
19 margin:20px;
20 display:block;
21 height:2000px;
22 background:#e2e2e2;
23 }
24 .topleft, .topright, .bottomleft, .bottomright {
25 position:fixed;
26 width:100px;
27 height:100px;
28 background-color:#990;
29 _position:absolute;/*for ie6*/
30 _z-index:-1;/*for ie6*/
31 }
32 .topleft {
33 left:0;
34 top:0;
35 }
36 .topright {
37 right:0;
38 top:0;
39 }
40 .bottomleft {
41 left:0;
42 bottom:0;
43 }
44 .bottomright {
45 right:0;
46 bottom:0;
47 }
48 </style>
49 </head>
50 <body>
51 <div class="topleft"></div>
52 <div class="topright"></div>
53 <div class="bottomleft"></div>
54 <div class="bottomright"></div>
55 <div class="mainbox">这里是内容区域填充文字</div>
56 </body>
57 </html>
posted @ 2012-02-15 18:50  ferrinweb  阅读(509)  评论(1编辑  收藏  举报