底部浮动条的一种兼容方案 -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> 底部浮动条的一种兼容方案

底部浮动条的一种兼容方案

浏览:1113次出处信息

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

以下是代码片段：
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>出师表</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>

</body>
</html>

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：让IE支持RGBa的背景色

后一篇：触发hasLayout引起的BUG >>

文章信息

作者：小寒来源：记事本
标签：浮动条
发布时间：2010-08-15 22:46:43

近3天十大热文