解决IE6浏览器下position:fixed固定定位问题

一般的 position:fixed; 实现方法

div id="top">...</div> 这个 HTML 元素使用的 CSS 代码如下：

#top{
position:fixed;
bottom:0;
right:20px;
}

实现让 <div id="top">...</div> 元素固定在浏览器的底部和距离右边的20个像素。

在 IE6 中实现 position:fixed; 的办法

在IE6中是不能直接使用 position:fixed; 。你需要一些 CSS Hack 来解决它。当然，IE6 的问题也不仅仅 position:fixed;

相同的还是让 <div id="top">...</div> 元素固定在浏览器的底部和距离右边的20个像素，这次的代码是：

#top{
position:fixed;
_position:absolute;
bottom:0;
right:20px;
_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 跟 left 属性可以用绝对定位的办法解决，而 top 跟 bottom 就需要用上面的表达式来实现。其中在_position:absolute; 中的 _ 符号只有 IE6 才能识别，目的是为了区分其他浏览器。

上面的只是一个例子，下面的才是最重要的代码片段：

使元素固定在浏览器的顶部：

#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}

你可以使用 _margin-top:10px;修改其中的数值控制元素的位置。

使元素固定在浏览器的底部：

#top{
_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)));
}这两段代码只能实现在最底部跟最顶部，你可以使用 _margin-bottom:10px; 修改其中的数值控制元素的位置。

position:fixed; 闪动问题

现在，问题还没有完全解决。在用了上面的办法后，你会发现：被固定定位的元素在滚动滚动条的时候会闪动。解决闪动问题的办法是在 CSS 文件中加入：

*html{
background-image:url(about:blank);
background-attachment:fixed;
}其中 * 是给 IE6 识别的。

到此，IE6 的 position:fixed; 问题已经被解决了。这里还为大家搜集了一个采用JS解决的办法。

JS的解决方案很简单,通过设置一个top来实现,top是指分页的上边距离document的上边的长度,可以被分解成下面几项

top = scrollTop + clientHeight - height(分页的高度)

 

解决IE6单个div无内容时高度height无法100%，只给IE6下的_height高度即可

.cover{background:yellow; width:100%;height:100%;z-index:100001;position:fixed;left:0px;top:0px;opacity:0.5;filter:alpha(opacity=50);

_height:expression(eval(document.documentElement.clientHeight));
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}

ie7浮动产生边距,在li下加vertical-align:middle; 

 

IE6下,CSS如何定义小于10像素的div高度

font-size:0px; 或者 overflow:hidden;

 

纯CSS现三角形，兼容IE6

div{width:0;height:0;line-height:0px;margin:10px 10px 0 0;border-width:100px;border-color: transparent transparent transparent #00f;border-style:dashed dashed dashed solid;}

其中line-height:0;是解决IE6的不尖角问题。border-color:表示四个边（上右下左），如果要画哪一边时，后面的border-style的solid顺序也要跟着改变，要不然IE7/8下看不到。