很多时时候，我们需要让某个元素始终位于浏览器的某一个位置，不会因为浏览器窗口的缩放和滚动条的滚动而变化，那个第一个想到的肯定是用position:fixed生成固定定位，然后依靠其值定位，就能达到其需求。可是当其他浏览器都正常显示的时候，只有IE6不那么完美。一般百度的时候就会发现IE6下各种奇葩问题都有，固定定位也算是一大难题，下面介绍的是如何使用CSS Hack解决IE6浏览器下不支持position:fixed属性的办法。
<div style="width:100%; height:5000px;">
<div class="fixedTop"></div>
<div class="fixedBottom"></div>
<div class="fixedLeft"></div>
<div class="fixedRight"></div>
</div>
.fixedTop,
.fixedBottom,
.fixedLeft,
.fixedRight{
width:100px;
height:100px;
background:#f00;
position:fixed;
}
.fixedTop{
top:0;
}
.fixedBottom{
bottom:0;
}
.fixedLeft{
left:0;
}
.fixedRight{
right:0;
}
- 以上为常用的固定定位的方式，用
position:fixed生成固定定位，设置其div的top,bottom,left以及right属性来进行位置的定位。
文章的开头也提头，IE6下面是不支持position:fixed的，那么为了让IE6也能够实现现样的效果，那么就只能通过position:absolute来模拟其效果
.fixedTop,
.fixedBottom,
.fixedLeft,
.fixedRight{
width:100px;
height:100px;
background:#f00;
position:fixed;
_position:absolute;
}
/*固定到头部*/
.fixedTop{
top:0;
_top:expression(documentElement.scrollTop);
}
/*固定到底部,'-30'可以修改其值*/
.fixedBottom{
bottom:0;
_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-30);
}
/*固定到左边*/
.fixedLeft{
left:0;
_left:expression(documentElement.scrollLeft);
}
/*固定到右边*/
.fixedRight{
right:0;
_left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.clientWidth);
}
- 这样就能够实现IE6下固定定位的问题了，如果你想要其定位的位置，可以修改其中的数值控制元素的位置。
现在，问题还没有完全解决。在用了上面的办法后，你会发现：被固定定位的元素在滚动滚动条的时候会闪动。解决闪动问题的办法是在 CSS 文件中加入：
/*----防止抖动---*/
body{
_background-image:url(about:blank); /* for IE6 */
_background-attachment:fixed; /*必须*/
}
到此，IE6 的 position:fixed; 问题已经被解决了。
PS：如果有童鞋觉得这样子写不是很好的话，可以用JS来解决此问题。
$(function(){
function reCal(){
var screenHelpwidth,
screenHelpheight,
myHelptop,
getPosHelpLeft,
getPosHelpTop;
screenHelpwidth = $(window).width();
screenHelpheight = $(window).height();
myHelptop = $(document).scrollTop(); //获取滚动条距顶部的偏移
//计算弹出层的left
getPosHelpLeft = screenHelpwidth / 2 - 320;
//计算弹出层的top
getPosHelpTop = screenHelpheight / 2 - 225;
//css定位弹出层
$("#boxcenter").css({"left": getPosHelpLeft, "top": getPosHelpTop + myHelptop});
}
reCal();
//当浏览器窗口大小改变时...
$(window).on('resize scroll',reCal);
});
