漫游的备忘录
用纯CSS打造兼容各大浏览器的底部固定悬浮导航
2011-11-18 漫游
转载:



效果演示地址:http://www.tianya.cn/focus/(注意底部的导航条)

考虑到ie6的兼容性问题,使用到了expression,具体代码如下:


<!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>固定悬浮导航</title>

<style type="text/css">

<!--

body {

background-image: url(0);

background-attachment: fixed;

}

#BottomNav {

background: #9F6;

z-index: 999;

position: fixed;

bottom: 0;

left: 0;

width: 100%;

_position: absolute;

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

overflow: visible;

}

-->

</style>

</head>

<body>

<div id="BottomNav">固定悬浮导航在此处</div>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

</body>

</html>


注意:_background-image:url(0);是用来解决了IE6下缓动问题的。