一个关于IE6固定定位底部且滚动时不晃动，有需要参考的朋友可参考参考。
给标签<div id="fixed"></div>设置样式，如下：
| 代码如下 |
|
|
body {
_background-image: url(about:blank); /*用浏览器空白页面作为背景*/
_background-attachment: fixed; /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/
}
#fixed {
position: fixed;
top: 50%; /* 其他浏览器下定位，在这里可设置坐标*/
_position: absolute; /*IE6 用absolute模拟fixed*/
_top: expression(document.documentElement.scrollTop + Math.round(document.documentElement.offsetHeight / 2) + "px"); /*IE6 动态设置top位置*/
background:#f60;
border: 1px solid #f00;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
left: 50%;
}
|
实例
| 代码如下 |
|
|
<!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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
body {margin:0; padding:0; border:0; background:#fff;}
#menu { height:300px; width:100px;display:block; top:50%; left:50%; margin-top:-160px; margin-left:-60px; width:130px; position:fixed; border:1px solid #888; padding:10px; text-align:center; font-weight:bold; color:#fff; background:#fff;}
* html #menu {position:absolute;}
</style>
在ie6里就是这部分代码有着让浮层不晃动的功效。哈哈哈哈
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
body { height:100%; overflow-y:auto;}
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<body>
<div style="height:1000px; width:90%; margin:0px auto; background:#75cdfc">2222222</div>
<div id="menu">
DUMMY MENU
<a href="#" title="Dummy menu item">Mozilla</a>
<a href="#" title="Dummy menu item">Opera</a>
<a href="#" title="Dummy menu item">Netscape</a>
<a href="#bites" title="Dummy menu item">Firefox</a>
<a href="#" title="Dummy menu item">IE6</a>
<a href="#" title="Dummy menu item">Windows</a>
<a href="#" title="Dummy menu item">Style</a>
<a href="#" title="Dummy menu item">CSS</a>
<a href="comment_id=position fixed" title="Your comments">Comments</a>
</div>
</body>
</html>
|
