使用absolute模拟fixed定位,兼容ie6,及ie7 8 9和火狐谷歌等浏览器

ie6不支持fixed定位,设定fixed定位后,ie6会认为是错误值,便会使用默认值static,可以使用absolute模拟fixed效果,并且兼容ie 7 8 9以及火狐等。

核心代码:
    html,body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    html { overflow: hidden; }
    body { overflow: auto;}
    #demo { position: absolute; }

原理:

html:Firefox,Opera,Safari默认是8,Chrome默认是0,IE系列默认是可视区域的高度。

body:Firefox,Opera,Safari,Chrome,IE8及以上默认是0,IE6和7默认是19。


认html和body高度随内容而变化,当html设置100%,且超出部分隐藏后,文档大小只有一屏高度,超出部分不会显示,也没有滚动条,而body
则是内容区,将body设置100%,且内容超出后自动产生滚动条,这样,其实内容超出后出现的滚动条是body的,模拟了默认浏览器出现的滚动条。这样
对元素进行绝对定位后是相对于整个浏览器可视区域的0 0坐标为基准,而内容超出后是以body为基准出现滚动条,且body高度已经设置成和可视区域高
度相同。所以即使拖拽滚动条,进行绝对定位的元素位置也不会变。

注:必须将html和body的padding和margin值清零,否则会出现不能填满浏览器的现象,且html和body不能设宽度,即使设置width: 100%也会出问题,ie6右边会有一部分空白无法填满浏览器。需要固定定位的元素,需要设置position: absolute。

例:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>使用absolute模拟fixed定位,兼容ie6,及ie7 8 9和火狐谷歌等浏览器</title>
    <style type="text/css">
    html,body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    html { overflow: hidden; }
    body { overflow: auto; background: red;}
    #box {
        width: 500px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -150px 0 0 -250px;
        background: blue;
    }
    </style>
</head>
<body>
    <div id="box">固定内容</div>
    <div style="height: 3000px">
        <p>滚动内容</p>
        <p>滚动内容</p>
        <p>滚动内容</p>
        <p>滚动内容</p>
        <p>滚动内容</p>
        <p>滚动内容</p>
        <p>滚动内容</p>
    </div>
</body>
</html>

时间: 2024-08-12 07:11:33

使用absolute模拟fixed定位,兼容ie6,及ie7 8 9和火狐谷歌等浏览器的相关文章

兼容IE6、IE7的min-width、max-width

警句:珍爱生命,远离IE 很多时候,我们会想要设置容器的最小宽度或最大宽度,但IE6不支持min-width.max-width属性怎么办? 别着急,跟着我慢慢来,会让你捉急的还很多呢 首先我们来看看标准属性min-width.max-width效果如何: .ie-hack {     min-width: 100px;     max-width: 200px; } <div class="ie-hack">LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL

min-height最小高度的实现(兼容IE6、IE7、FF)(解决IE6不兼容min-height)

<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Author" content="胡超"> <title>super胡</title> <style> div{ background:#ccc; min-height:100px; /*高度最小值设置为:100px IE6不

CSS Hack 兼容IE6、IE7 、FireFox

!important 兼容IE7:width: 600px !important; /* IE7+FF */background:#fff; /* 对firefox有效*/ *background:#ccc; /* 对ie7有效 */ _background:#000; /* 只对ie6有效 */margin-top: 10px \9; /*IE8*/ 火狐浏览器:@-moz-document url-prefix() { #id{ display: block; } } /* Firefox

ie6使用expression模拟fixed定位

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html{ _background:url(about:blank); /* 阻止IE6中闪动 , 把空文件换成about:blank , 减少请求 */ } /* 固定定位图层 */ .fixe

IE6、IE7、IE8、火狐兼容性问题

浏览器不兼容 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px,opera下就更不一样了.解决方案:给文字设定 line-height .确保所有文字都有默认的 line-height 值.这点很重要,在高度上我们不能容忍1px 的差异. 2.ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑

关于fixed定位的一些错误看法纠正

之前由于一些误导,一直感觉fixed这个定位在ie8下面是会出现兼容问题的,今天发现这个想法太绝对了,它只是在ie7 8 的怪异模式下面会出现兼容问题 解决这个问题可以通过用absolute来模拟fixed来模拟fixed定位来解决这个兼容的问题,但是最好的办法还是强制浏览器使用标准模式渲染页面,毕竟这个问题只是在怪异模式下面会出现,使用absolute模拟太麻烦了. <meta http-equiv="X-UA-Compatible" content="edge&qu

浮动层固定兼容IE6 position:fixed的最佳解决方案

第一种:css方法 有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固定层CSS代码.如下: .bottom{bottom:0;position:fixed;height:23px;line-height:23px;width:100%;z-index:999; _bottom:auto;_width:100%;_position:absolute; //_top:e

解决ie6下不支持fix属性,模拟固定定位

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>模拟固定定位fix</title> 6 <style> 7 html{ height:100%; overflow:hidden;} 8 body{marg

IE6和IE7定位的兼容问题简单介绍

IE6和IE7定位的兼容问题简单介绍:定位的浏览器兼容性问题很小,就是IE6和IE7对z-index属性的解析上有所差别,并且这两个版本的浏览器在中国存活的估计也不会太长了,所以关于这个兼容性问题有兴趣的朋友可以参阅以下本章节,下面就是一段关于此问题的实例代码.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author&quo