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. 自学JQuery Mobile的几个例子

    JQuery Mobile是一个用于构建移动Web应用程序的框架,适用于主流的移动设备(智能手机.平板电脑),该框架利用了HTML5和CSS3技术减少了额外的脚本文件的编写.具体JQuery Mobi ...

  2. 转场动画2-Pop动画

    上一篇试讲push动画,这篇分解pop动画 里面关于矩阵有不懂得,参考CATransform3D 特效详解 上图(虚拟机下,图是渣渣 ) 代码直接上 // // PopTransition.h // ...

  3. 使用mobile jQuery 动态给select下拉添加数据，选中项默认不显示的解决方法。

    getaddress(); function getaddress(type=0,parent='') { var tid=1; $.ajax({ type: "post", ur ...

  4. 条件注释+JS实现各版本IE浏览器className

    最近又开始忙了,项目中又遇到了可恶的IE Hack问题,各种Hack的看着让自己都觉得恶心,于是决定改造一番. 首先请出条件注释语句: 之前用过的条件注释 <!--[if lt IE 7]> ...

  5. classpath的总结

    转自:http://blog.csdn.net/javaloveiphone/article/details/51994268   版权声明:本文为博主原创文章,未经博主允许不得转载. 1.src不是 ...

  6. IISExpress实现外部访问

    首先修改IISExpress配置文件 \IISExpress\config\applicationhost.config 在website中添加一个binding <binding protoc ...

  7. 2)PHP中把读取.txt中内容并转为UTF-8格式

    <?php $filename = "filename.txt"; $handle = fopen($filename, "r");//读取二进制文件时, ...

  8. 星际SC地图制作中生成随机位置，也包括所有需要随机的效果

    星际SC地图制作中生成随机位置,也包括所有需要随机的效果 利用单位 kakaru T 开头那个, kakaru是随机变化位置 注意kakaru的放置位置和占用格子大小,kakaru周围放上LOCATI ...

  9. PHP判断是中文还是英文

    static function ischinese($s){ $allen = preg_match("/^[^/x80-/xff]+$/", $s); //判断是否是英文 $al ...

  10. Python的maketrans() 方法

    描述 Python maketrans() 方法用于创建字符映射的转换表,对于接受两个参数的最简单的调用方式,第一个参数是字符串,表示需要转换的字符,第二个参数也是字符串表示转换的目标. 注:两个字符 ...