底部浮动条的一种兼容实现方法

内容摘要
这篇文章主要为大家详细介绍了底部浮动条的一种兼容实现方法,具有一定的参考价值,可以用来参考一下。

原理:在标准浏览器下用position: fixed的方式就可以了。IE6下面用overla
文章正文

这篇文章主要为大家详细介绍了底部浮动条的一种兼容实现方法,具有一定的参考价值,可以用来参考一下。

原理:在标准浏览器下用position: fixed的方式就可以了。IE6下面用overlay.className = overlay.className迫使浏览器重新布局,以达到position: fixed的效果。 html代码如下:

 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>出师表 WWW.512pic.com</title>
  <style type='text/css'>
  html, body {
    margin: 0;
    padding: 0;
  }
  body {
    /* 这里不能加position: relative */
  }
  #content {
    font-family: 微软雅黑;
    font-size: 36px;
    line-height: 60px;
    width: 960px;
    margin: 0 auto;
  }
  #content p {
    text-indent: 2em;
  }
  #overlay {
    opacity: .5;
    filter: alpha(opacity=50);
    background: #ccc;
    width: 100%;
    height: 100px;
    position: fixed;
    _position: absolute;
    bottom: 0;
  }
  </style>
</head>
<body>
  <div id='content'><p>先帝创业未半,而中道崩殂;今天下三分,益州疲敝,此诚危急存亡之秋也。然侍卫之臣,不懈于内;忠志之士,忘身于外者:盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气;不宜妄自菲薄,引喻失义,以塞忠谏之路也。宫中府中,俱为一体;陟罚臧否,不宜异同:若有作奸犯科,及为忠善者,宜付有司,论其刑赏,以昭陛下平明之治;不宜偏私,使内外异法也。侍中、侍郎郭攸之、费依、董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下:愚以为宫中之事,事无大小,悉以咨之,然后施行,必得裨补阙漏,有所广益。将军向宠,性行淑均,晓畅军事,试用之于昔日,先帝称之曰"能",是以众议举宠为督:愚以为营中之事,事无大小,悉以咨之,必能使行阵和穆,优劣得所也。亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也!侍中、尚书、长史、参军,此悉贞亮死节之臣也,愿陛下亲之、信之,则汉室之隆,可计日而待也。</p><p>臣本布衣,躬耕南阳,苟全性命于乱世,不求闻达于诸侯。先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,谘臣以当世之事,由是感激,遂许先帝以驱驰。后值倾覆,受任于败军之际,奉命于危难之间:尔来二十有一年矣。先帝知臣谨慎,故临崩寄臣以大事也。授命以来,夙夜忧虑,恐付托不效,以伤先帝之明;故五月渡泸,深入不毛。今南方已定,甲兵已足,当奖帅三军,北定中原,庶竭驽钝,攘除奸凶,兴复汉室,还于旧都:此臣所以报先帝而忠陛下之职分也。至于斟酌损益,进尽忠言,则攸之、依、允等之任也。愿陛下托臣以讨贼兴复之效,不效则治臣之罪,以告先帝之灵;若无兴复之言,则责攸之、依、允等之咎,以彰其慢。陛下亦宜自谋,以谘诹善道,察纳雅言,深追先帝遗诏。臣不胜受恩感激!今当远离,临表涕泣,不知所云。</p>
  </div>
  <div id='overlay'></div>
<!--[if IE 6]>
<script type="text/javascript">
(function(){
  var overlay = document.getElementById('overlay'), t;
  window.onscroll = function() {
    t && clearTimeout(t);
    t = setTimeout(function() {
      // reflow
      overlay.className = overlay.className;
    }, 13);
  };
})();
</script>
<![endif]-->
</body>
</html>

注:关于底部浮动条的一种兼容实现方法的内容就先介绍到这里,更多相关文章的可以留意

代码注释

作者:喵哥笔记

IDC笔记

学的不仅是技术,更是梦想!