CSS+DIV固定底部的漂浮导航条（多浏览器兼容）

2019独角兽企业重金招聘Python工程师标准>>>

CSS+DIV固定底部的漂浮导航条（多浏览器兼容）博客分类： div css

在项目中。为了解决多浏览器兼容的问题。。ie6很头痛。div经常出现浮动。。。。

然后在网上找了一个例子。。。。

css代码如下：

body { background-image:url(text.txt); /* for IE6 */
background-attachment:fixed; }#bottomNav { background-color:#096; z-index:999; position:fixed; bottom:0; left:0; width:100%; _position:absolute; /* for IE6 */_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible; }

html代码如下：

<div id="bottomNav">这里加入你的代码固定底部漂浮</div>

再看看这些需要注意的地方：

_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
看到 _top 是为IE6独家准备的，但是当我只加了上面这句时，IE6下拉动滚动条看到的这个漂浮物是抖动的-_-||| 解决方法我们为IE6添加这样一条语句：
background-image:url(text.txt);
注意这里的 text.txt 其实不需要有这个txt文档，txt的文件名叫什么看自己喜好喽，如此一来我们就解决了IE6下的缓动问题。

PS:你可能会对 text.txt 和 expression 感到郁闷，也有人使用多嵌套一层 DIV 做了个假滚动条实现了这个方法，当然这种方法在也会相应的改动下默认属性，可这种写法和之前网站融合起来很郁闷，要添加一个DIV（因为我之前没有在最外层写DIV.wrap）。

转载于:https://my.oschina.net/xiaominmin/blog/1598279

CSS+DIV固定底部的漂浮导航条（多浏览器兼容）相关推荐

php底部漂浮广告位代码,DIV+CSS固定底部的漂浮广告
DIV+CSS固定底部的漂浮广告发布时间:2017-04-12 07:16 来源:互联网当前栏目:网页设计教程在项目中.为了解决多浏览器兼容的问题..ie6很头痛.div经常出现浮动.... 然 ...
amazeui学习笔记--css（常用组件10）--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
前端——用div画菜鸟网站首页导航条“小三角”
今天学到一个新的知识点--用div来画"三角". 之前本帅博主写过一篇<前端--菜鸟网站横向CSS导航条菜单:带小三角形>,里面也有介绍如何制作小三角形,不过它是用的现 ...
CSS 3.0实现创意菜单导航条
给大家分享一个用CSS 3.0实现创意菜单导航条,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en&quo ...
css div漂浮向下,DIV+CSS固定底部的漂浮广告
在项目中.为了解决多浏览器兼容的问题..ie6很头痛.div经常出现浮动.... 然后在网上找了一个例子.... css代码如下: body { background-image:url(text.t ...
CSS快速学习：几种导航条案例
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
CSS/HTML制作W3School网页的导航条
W3School原网页: 效果图: <!DOCTYPE html> <html lang="en"> <head><meta charse ...
CSS实现移动端横向滚动导航条
cssHTML代码 <ul> <li> <a href=" ...
web开发——css京东图片列表和左侧导航条的演示
学了知识就一定要对知识进行巩固,而做实战做练习就是对知识最好的巩固了. 目录学了知识就一定要对知识进行巩固,而做实战做练习就是对知识最好的巩固了. 例1: 代码行: 效果图: 例2: 代码行: 效果 ...

CSS+DIV固定底部的漂浮导航条（多浏览器兼容）

CSS+DIV固定底部的漂浮导航条（多浏览器兼容）相关推荐

最新文章

热门文章