-
支持IE6的position:fixed 纯CSS 多浏览器兼容
日期:2009-06-23 | 分类:互联网
版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://ericneo.blogbus.com/logs/41401853.html
position:fixed是让某个元素固定浮动在浏览器的某处,但这个属性IE6支持部完整。
这里有个支持IE6的方法,DEMO如下:
<!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>IE6 position:fixed bug</title>
<style>
* {
padding:0;
margin:0;
}
#rightform {
text-align:center;
padding:50px;
font:14px/22px Georgia, "Times New Roman", Times, serif;
height:1200px;
background:#ffc;
}
#rightform h1 {
font-family:arial;
background:#e8edef;
height:300px;
line-height:300px;
margin-bottom:200px;
}
#rightform p {
line-height:1.5em;
background:#ffdfff;
padding:90px 0;
}
#rightform form {
background-color:#ddd;
padding:10px 20px;
border:1px solid #aaa;
position:fixed;
right:30px;
top:120px;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#rightform form{position:absolute;}
</style>
<![endif]-->
</head>
<body>
<div id="rightform">
<h2>
<a href="" title="IE6 position:fixed bug" rel="bookmark">IE6 position:fixed bug</a>
</h2>
<p>position:fixed; vs position:absolute;<br /></p>
<form id="g_search" method="get" action="#">
<input id="g_s" name="g_s" type="text" value="" />
<input id="g_submit" name="g_submit" type="button" value="search" />
</form>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>随机文章:
【IE6 BUG大全】position:fixed在IE6下的实现 2009-06-30ie6 img边缘空白 2009-06-23用css控制div内链接在新窗口打开 2009-07-02清除浮动(闭合浮动元素)的方法总结与选择 2009-05-30
收藏到:Del.icio.us







