纯CSS定位的固定浮动层代码不闪兼容IE6 8 火狐谷歌等

最新推荐文章于 2022-07-20 12:27:04 发布

ranbolwb

最新推荐文章于 2022-07-20 12:27:04 发布

阅读量1w

点赞数

分类专栏： html与css 文章标签： ie css html border 浏览器 flash

html与css 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种使用CSS实现元素在页面上固定位置的方法，包括针对不同浏览器的兼容性解决方案，如IE6及现代浏览器的固定定位技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*  IE8 火狐  谷歌等 固定样式  */
.fixed-bottom
{
    position: fixed; bottom: 0px; width: 1100px; left: 50%;  margin-left: -550px;
}

/*  IE6 固定样式 */
* html,* html body /* 修正IE6振动bug */
{
    background-image:url(about:blank);    /*用浏览器空白页面作为背景*/
    background-attachment:fixed; /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/
}
* html .fixed-top /* IE6 头部固定 */
{
    position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));
}
* html .fixed-right /* IE6 右侧固定 */ 
{
    position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));
}
* html .fixed-bottom /* IE6 底部固定 */
{
    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)));
}
* html .fixed-left /* IE6 左侧固定 */
{
    position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));
}

页面代码：

<div id="divFixed" class="fixed-bottom">
            <img src="images/nhzt/nhzt_bb2.jpg" alt="" border="0"  />
        </div>

居中固定样式：

        /*  IE8 火狐  谷歌等 固定样式  */
        .fixed-middle        {
            position: fixed; left:50%; top: 50%;  margin-top: -80px;margin-left:-155px;
        }

        /*  IE6 固定样式 */
        * html,* html body /* 修正IE6振动bug */
        {
            background-image:url(about:blank);    /*用浏览器空白页面作为背景*/
            background-attachment:fixed; /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/
        }
        * html .fixed-middle /* IE6 居中固定 */
        {
            position:absolute;
            bottom:auto;top:expression(eval(document.documentElement.scrollTop) + document.documentElement.clientHeight/2 - this.offsetHeight/2);
            margin-top:0px;
        }