ie6并不支持position:fixed, ie7+都支持fixed定位，

ie6固定定位实现方法1：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<style>

.top{

width:100px; height:100px; background:#ff8; border:1px solid #555;

position:fixed;

bottom:0;

right:0;

/* ie6不支持position:fixed; ie 7/8/9都支持 */

_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)));

_right:0; /* body.scrollTop是变动的,用expression来计算top的值, this引用和选择器匹配的元素 (问题:据说expression有性能问题, 此时页面滚动时固定定位元素会抖动)*/

}

/* * html或*html等效 针对ie6的选择器hack */

* html{background:url(about:blank); background-attachment:fixed;} /* 解决ie6页面滚动时 "固定定位"元素抖动问题 url(about:blank); fixed都是必须的 */

.high{height:1000px; border:2px dashed pink;}

</style>

</head>

<body>

    <div class="high"></div>

    <div class="top"></div>

</body>

</html>

ie6固定定位实现方法2：(推荐这个相对简单的方法)

先看看原理:

本文向大家简单介绍一下解决IE6下position:fixed问题方法，造成这个问题的原因是fixed元素的绝对位置是相对于HTML元素，滚动条是body元素的，相信本文介绍一定会让你有所收获。

完美的IE6 position:fixed

这个内容是老生常谈了，主要问题就是IE6不支持position:fixed引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用position:absolute来替代解决,可是我们真的解决了么?没有,因为当页面比较长的时候,拖动滚动条,那个fix的地方也相应的闪动.虽然最终会近似于需求的目标,但是不完美.那么如何解决这一问题呢?

造成这个问题的原因是fixed元素的绝对位置是相对于HTML元素,滚动条是body元素的(貌似ie6中他们的区别就是在于滚动条界限那里)。知道了原因,我们就大概知道如何解决了:

  1. <!--[if IE 6]>
  2. <style type="text/css">
  3. html{overflow:hidden;}
  4. body{height:100%;overflow:auto;}
  5. #fixed{position:absolute;}
  6. </style>
  7. <![endif]-->
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equivmetahttp-equiv="Content-Type"

content="text/html;charset=gb2312"/>

<title>IE6position:fixed</title>

<style>

*{

 padding:0;

 margin:0;

}  

#fixed{

 background-color:#ddd;

 border:1px solid #aaa;

 position:fixed;

 right:0;

 top:0;

}

</style> 

<!-- 注意条件注释的格式 “if ie 6”之间要有空格 结束标记 endif 没有空格  方括号与内部内容不能有空格-->

条件注释格式 必须是这样 注意空格情况  <!--[if ie 6]>  .... <![endif]-->

<!--[if ie 6]>

<style type="text/css">

 html{overflow:hidden;}  /* 内容超出则隐藏 这样就不会有滚动条 */

 body{height:100%;overflow:auto;} /* 和html一样高(即等于浏览器窗口可视高度，内容超出则滚动) */

 #fixed{position:absolute;right:17px;}  /* 固定定位元素虽然在body内部，但它是相对html定位的 */

</style>

<![endif]-->

</head>

<body>

<div style="height:1000px; border:2px dashed pink"></div>

<div id="fixed">FIXED  </div>

</body>

</html>

ie6与固定定位fixed,+ 条件注释格式注意的更多相关文章

  1. IE6解决固定定位代码

    有些朋友在进行网页布局时,会遇到IE6浏览器不支持固定定位的兼容性问题,本博将详细介绍此问题的解决方法,需要了解的朋友可以参考下. ie6 垂直居中固定定位,代码如下: #center {_posit ...

  2. 固定定位fixed，绝对定位absolute，相对定位relative；以及overflow

    固定定位position:fixed /*固定定位 1.定位属性值:fixed 2.在页面中不再占位(浮起来了) 3.一旦定位后,定位的布局方位 top.bottom.left.right都能参与布局 ...

  3. 固定定位fixed（IE6）

     position: fixed;          left:200px;          top:100px;          _left:200px;          _top:100px ...

  4. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  5. 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  6. 理解CSS相对定位和固定定位

    × 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...

  7. 关于HTML条件注释你可能不知道的一些事儿

    最近经常看到类似这样的HTML代码片段,很多前端开发人员应该都熟悉: 1 <!--[if lt IE 7]>      <html class="ie6"> ...

  8. IE6浏览器不支持固定定位（position：fixed）解决方案

    代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  9. IE6浏览器不支持固定定位（position：fixed）解决方案(转)

    IE6浏览器不支持固定定位(position:fixed)解决方案   来源:互联网 作者:佚名 时间:12-04 10:54:05 [大 中 小] 点评:有些朋友在进行网页布局时,会遇到IE6浏览器 ...

随机推荐

  1. IHttpModule与IHttpHandler的区别整理

    IHttpModule与IHttpHandler的区别整理1.先后次序.先IHttpModule,后IHttpHandler. 注:Module要看你响应了哪个事件,一些事件是在Handler之前运行 ...

  2. 第一个输出程序 Console.WriteLine

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. N 组连续子串最大和

    数组 a 中有 M 个数 , 将 M 个数分成 N 组 , 并且每组中的数据顺序和原数组中的顺序保持一致,求 N 组中的数据之和最大为多少? 向 dp 数组中赋初始值 ,如果 M == N ,则 dp ...

  4. nginx install

    ./configure --prefix=/home/allen.mh/local/nginx --with-http_ssl_module --with-http_sub_module --with ...

  5. 【转】Eclipse自动补全的设置方法

    转自:http://blog.csdn.net/xiadasong007/archive/2009/11/11/4799715.aspx 打开 Eclipse -> Window -> P ...

  6. poj 1206

    /** 题意: 给定一序列,置换k次之后 输出其状态 置换: 考察循环节长度, 思路: 分别求出每个元素的循环节的大小,用k 模其大小,大的k次之后的位置, 输出即可 **/ #include < ...

  7. android-通知Notification

    发送通知 public class MyActivity extends Activity { @Override protected void onCreate(Bundle savedInstan ...

  8. asp.net 多站点共享StateServer Session

    <sessionState mode="StateServer" stateConnectionString="tcpip=127.0.0.1:42424" ...

  9. linux系统CPU,内存,磁盘,网络流量监控脚本

    前序 1,#cat /proc/stat/ 信息包含了所有CPU活动的信息,该文件中的所有值都是从系统启动开始累积到当前时刻 2,#vmstat –s 或者#vmstat 虚拟内存统计 3, #cat ...

  10. Struts 和Spring的核心控制器

    Struts 核心控制器是FilterDispatch Spring核心控制器是DispatchServlet