宝宝健康成长网首页刘易桉宝宝健康成长 林林微博 育儿护理知识 宝宝网址导航
当前位置: 首页 >> 宝宝建站 >> 兼容IE6 浏览器的wordpress底部工具栏

兼容IE6 浏览器的wordpress底部工具栏

转基因培育增加一个底部工具栏,这个工具栏的特色在于它始终位于页面的最底部。类似的工具栏在一些SNS网站如开心网、人人网,Facebook都有。利用position:fixed很容易实现工具栏固定在页面底部,但是在 ie6 浏览器下有兼容问题。下面详细说明下利用CSS和html制作兼容 IE6 的底部固定工具栏。

1、在 footer.php 里的添加如下HTML结构代码。需要在wordpressfooter.php 中添加两层div,一个用来定位工具栏到底部,而另一个用来做容器。这里div个数可以按照个人需要增减。

<div id="toolbar">
<div id="inner">
<div id="nhpnavi"><?php $rand_post=get_posts('numberposts=1&orderby=rand'); foreach($rand_post as $post) : ?><a href="<?php the_permalink(); ?>">手气不错</a><?php endforeach; ?></div>
<ul><li class="left"><a rel="nofollow" href="http://biotechgo.net/blog/audio/twitter.php">[email protected]</a></li>
<li class="center"><a href="http://biotechgo.net/blog/feed/">Rss feed</a></li>
<li class="third"><a rel="nofollow" href="http://biotechgo.net/blog/audio/pindao.php">pin dao</a></li>
<li class="right"><a href="#">返回页面顶部</a></li></ul>
</div>

2、CSS代码。上述html对应的CSS样式

#toolbar{position:fixed;bottom:0;background:transparent url(images/fbg.png) repeat-x;height:30px;width:988px;overflow:visible;z-index:999;}
#inner{width:960px;margin:8px auto 0;font-size:13px;}
#inner ul {overflow:hidden;list-style-type:none;display:inline;
vertical-align:top;}
#inner ul li.left {background:transparent url(images/allfooter.png) no-repeat 0 -43px;
float:left;height:19px;padding-left:25px;position:relative;width:100px;}
#inner ul li.center {background:transparent url(images/allfooter.png) no-repeat 0 -64px;
float:left;padding-left:25px;position:relative;height:19px;width:80px;}
#inner ul li.third {background:transparent url(images/allfooter.png) no-repeat 0 -22px;
float:left;padding-left:25px;position:relative;height:19px;width:80px;}
#inner ul li.right {background:transparent url(images/allfooter.png) no-repeat 0 -85px;
height:19px;float:right;padding-left:30px;position:relative;}
#nhpnavi{background:transparent url("images/allfooter.png") no-repeat;float:left;padding-left:30px;position:relative;height:19px;width:120px;display:inline;
vertical-align:top;}

至此,已经能在除 IE6 内核的浏览器下实现底部固定工具栏效果了。但是,我们还是要兼容 IE6 浏览器的。因为在中国,IE6 还是有很多人在使用。

兼容 ie6 第一步,解决IE6的position:fixed;的Bug。css中添加以下代码:

* html #toolbar{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));_overflow:hidden;}

第二步,解决 IE6 下页面下拉时工具栏奇怪的“抖动”Bug。当然,您可以略过此步,我发现,CNTV的底部工具栏就没有解决这个bug。抖的还别有一番。

css中添加以下代码:

*html{background-image:url(about:blank);background-attachment:fixed;}

OK!打完收功

敬请留言当前共有 7 条评论

  1. 学夫子 说道:

    不知道为什么,中国人硬是不愿意抛弃ie6……否则这样的东西就是不需要的

  2. 白大王 说道:

    传说中的“防刷工具条”

  3. david 说道:

    没看到效果演示呀。。

  4. 二手科学家 说道:

    演示就是本博底部的工具栏,不过现在已经是升级版了,加了js,但主体代码并没有变。

  5. Even 说道:

    这个很有用

    第一次来到这里

    支持博主

  6. 长春公关活动 说道:

    第一次来到这里

    支持博主

发表评论

^留言没头像?教你设置头像!
我的应用 [email protected] 宝宝问答>  0-1岁  1-3岁  3-6岁 手气不错