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. System.Data.SQLite兼容32位和64位问题

    SQLite版本分的很详细,本机是64位在32位会出现问题,经过搜索找到解决方案. 这是我以前写的32位在我现在的机子上的运行报错. 类似这样的. 将当前说明文档的目录下的x64.x86目录和Syst ...

  2. 使用window.postMessage实现跨域通信

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...

  3. Css元素布局定位

    <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  4. 【转】iOS隐藏导航条1px的底部横线

    默认情况下会有这条线 第一种方法: 1 2 3 4 5 6 UINavigationBar *navigationBar = self.navigationController.navigationB ...

  5. PHP GUID的生成源码

    <?php function guid(){ if (function_exists('com_create_guid')){ return com_create_guid(); }else{ ...

  6. cocos2d-X-3.X 场景与层

    1场景与层的相关函数 1. void runWithScene(Scene * scene). 该函数可以运行场景.只能在启动第一个场景时调用该函数.如果已经有一个场景运行,则不能调用该函数. 2.  ...

  7. JSP数据交互——九大内置对象及其方法详解（一）

    ①既然说到JSP内置对象,那么什么是JSP内置对象呢? 解析:JSP内置对象,就是在编写JSP页面时,不需要做任何声明就可以直接使用的对象. 如下代码片段:  <% int[]  value  ...

  8. 手机端 UI一些插件

    手机弹出框 http://yun.baidu.com/share/link?shareid=3523128425&uk=2685891615

  9. python基础学习笔记6--异常

    异常 1.什么是异常?  python用异常对象来表示( exception object)异常情况.如果异常没有被处理或扑捉,程序就会所谓的回溯(TraceBack,一种错误信息)而终止执行: 2. ...

  10. java核心技术学习笔记之三程序设计结构

    一 基本数据结构 必须包括在类中 必须具备 public static main方法 大小写敏感 二.数据类型 四种整数类型: Int 4字节 short 2字节 long8字节 byte1字节 二种 ...