Loading...

CSS兼容性考虑-如何用css固定位置

有的时候我们需要将一个div固定在一个屏幕的指定位置,如在使用loading状态条的时候,或者显示在线用户数的时候。需要的是将div显示在网页的中间,顶端或者左下端,并且无论滚动条如何拉动,这个div将始终保持在相同的相对位置。这些要求用css是很可以容易实现的,只需要用到position:fixed这个描述参数即可。和position: fixed;平行的描述语言有 position: absolute; position: relative; position: static;这里主要讲一讲fixed和absolute的区别,fixed表示始终处于同屏幕的一个位置,即使你拉动滚动条,依然会显示在屏幕的相对位置,而absolute则不一样,absolute针对网页的位置进行描述,所以拉动滚动条后有可能会将显示在中部的div拉动到顶端去,因此,下面的一段css将会把div放在屏幕的中央:
#LoadingStatus{
position:fixed ;
top:100px;/*始终距离屏幕的高度是100px*/

/*后面的描述和位置无关,所以后面的例子请大家关注本行之前的描述*/
width:220px;height:20px;
left:50%;
margin:0 0 0 -110px;/* 将div将左端推进一半的长度,这样才能显示到真正的中间 */
border:1px solid red;
}
如果你用这段css去做实验的话,我相信多数朋友看不到应有的效果,原因在于你用的是IE,那个对w3标准支持不完善的浏览器,如果你用firefox的话,应该是没有任何问题的。不过我们得承认现实,毕竟IE的浏览器占据了绝大部分市场,所以必须写出兼容IE的css才行。由于IE不支持fixed,因此,可以针对IE和FF写不同的css,如:
div#LoadingStatus { position: absolute; left: 0px; top: 0px; }
body > div#LoadingStatus { position: fixed;/*这个描述IE不认识,因此针对其他浏览器有效*/ }

上面的代码解决了兼容的问题,但是IE下的依然不能将div固定在屏幕的具体位置,因此我们只有出绝招了,那便是写出兼容的css,代码如下(传说出现表达式的css出现了):

div#LoadingStatus{
left: 50%;
top: expression( document.body.scrollTop +100 +'px' );/*按照表达式计算出当前屏幕位置所对应的网页位置*/
}
body > div#LoadingStatus{ position: fixed; left: 0px; top: 100px; }

这样看来似乎已经很完美了,应该能够得到我们需要的效果了,不信,你自己试一试。对不起,让你失望了,这还是不行,因为我们在拉动滚动条的时候,针对IE的那段css中的表达式罢工了,仅仅是载入页面的时候进行了计算,后面就不干活了,这可如何是好?别担心,一个IE的bug而已,我们只要将表达式的值赋给一变量,这个问题就解决了,所以下面的css就可以正常工作了:
#LoadingStatus{
position:fixed !important;/*important针对FF,这样后面的position描述就没有用了 */
position:absolute;/* 针对IE */
top:100px;
top: expression( ( 100 + ( noValue = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
/*上面这个表达式针对IE,FF不认识该表达式,所以top的值就是100px了 */

margin:0 0 0 -110px;
width:220px;height:19px;
left:50%;
text-align:center;
border:1px solid red;

}

那么如何将div固定在左上角或者右下角呢?下面给点css代码,应该自己看看就能明白了:
div#LoadingStatus {
/* IE5.5+/Win – this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression( ( -20 – fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( noValue2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + ‘px’ );
top: expression( ( -10 – fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( noValue = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + ‘px’ );
}
忘记给案例了,要不又有朋友有意见了,案例请参见附件:fix.html

标签:,
发表于 2007-10-14 11:48:00 目录:HTML客户端, 网站技术 [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
  • 相关阅读
  • homezz 美国专业主机商
    feed url
    上一篇: « 关注一下广州房价
    下一篇: 昨天整了一件风衣 »
    已经有6位大师动手指导 拒绝低俗
    • 1楼 北极冰仔 在2007.10.14 12:12发表评论如下: 回复

      我在很大程度上已经不再把考虑 IE 用户作为工作重点了,IE 下的显示效果能将就就将就了。[r]可是事实上IE还是盟主呢,不过看自己定位了[/r]

      • 2楼 Jake 在2007.10.14 12:45发表评论如下: 回复

        如果不是IE的话一句position:fixed就很好的解决了。

        • 3楼 LeafDuo 在2007.10.14 13:37发表评论如下: 回复

          设计人员都把时间浪费在搞定IE上了,严重浪费了生产力。
          为什么IE就有这么多人用呢?[r]这也是那些所谓的设计人员造成的,特别是国人,你看看国内的web有几个能完全支持IE之外的浏览器啊?所以啊,这是没有办法滴[/r]

          • 4楼 Jake 在2007.10.14 17:49发表评论如下: 回复

            我们学校的教务系统,选课,查成绩,全指望它了。国家火炬项目,全国500多所高校在用。只能用IE上。

            • 5楼 FlyingHail 在2007.10.19 21:36发表评论如下: 回复

              呵呵,9月30的时候我也发了一篇关于 IE6 下支持 position:fixed 的文章:http://www.flyinghail.net/?p=58
              其实和你说的方法本质是一样的,不过因为有一点不同所以效果更完美,可以看到你给出的例子移动时能看到闪烁,加上两句CSS后移动效果就非常完美了。
              因为那几个函数在后面写js的时候还是挺有用的,所以我就单独定义在script里面了,呵呵。

              • 6楼 google code 在2008.09.20 15:11发表评论如下: 回复

                google code ie7.js/ie8.js有点用

                评论分页: 1
                (Required)
                (Required, not published)
                如果留言未显示无需重复留言,我将为你恢复!