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. oracle tns

    oracle tns 是oracle提供的服务名,设置方法,oracle安装根目录---product----版本选择11.2.0----client1---NETWORK---ADMIN---tns ...

  2. JavaScript之apply()和call()的区别

    我 在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示 例,总算是看的有点眉目了,在这里我做如下笔记,希望和 ...

  3. SQL Convert XML to Table

    将xml nodes 属性中的值 转为table 形式 declare @xml2 xml set @xml2 = '<CMADatas> <CMAData CmaName=&quo ...

  4. spring mvc 简单搭建

    文中用的框架版本:spring 3,hibernate 3,没有的,自己上网下. web.xml配置: </load-on-startup>     </servlet>    ...

  5. JavaSE复习日记 : 抽象类

    /* * 抽象类 * 抽象: * 面向对象的三大核心思想; * 封装: 封装,ppp是封装的一部分 * 继承; * 多态: 父类的引用指向子类的对象 * 引用: 是指一个引用型变量 * 有哪些变量? ...

  6. P - Shopaholic

    P - Shopaholic Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu Submit ...

  7. （转）深入浅出Java三大框架SSH与MVC的设计模式

    原址:http://www.educity.cn/java/1382738.html 现在许许多多的初学者和程序员,都在趋之若鹜地学习Web开发的宝典级框架:Struts2, Spring,Hiber ...

  8. 各种排序算法(C语言)

    #include <stdlib.h> #include <stdio.h> void DataSwap(int* data1, int* data2) { int temp ...

  9. Scale-up(纵向扩展) vs Scale-out(横向扩展)

    转载:http://wuaner.iteye.com/blog/1843799 http://www.javaworld.com/article/2077780/java-web-developmen ...

  10. CCNA实验(10) -- Access List

    使用包过滤技术在路由器上读取三层及四层报头的信息如源地址.目的地址.源端口.目的端口根据预先定义好的规则对包进行过滤 三种类型:1.标准ACL:表号范围1-99或1300-1999.仅对源IP地址进行 ...