IE6固定定位底部且滚动时不晃动

给标签<div id="fixed"></div>设置样式，如下：

 代码如下 复制代码

body {
_background-image: url(about:blank);     /*用浏览器空白页面作为背景*/
_background-attachment: fixed;     /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/
}

#fixed {
position: fixed;
top: 50%;  /* 其他浏览器下定位，在这里可设置坐标*/
_position: absolute;  /*IE6 用absolute模拟fixed*/
_top: expression(document.documentElement.scrollTop + Math.round(document.documentElement.offsetHeight / 2) + "px"); /*IE6 动态设置top位置*/
background:#f60;
border: 1px solid #f00;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
left: 50%;
}

实例

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">

body {margin:0; padding:0; border:0; background:#fff;}
#menu { height:300px; width:100px;display:block; top:50%; left:50%; margin-top:-160px; margin-left:-60px; width:130px; position:fixed; border:1px solid #888; padding:10px; text-align:center; font-weight:bold; color:#fff; background:#fff;}
* html #menu {position:absolute;}
</style>
在ie6里就是这部分代码有着让浮层不晃动的功效。哈哈哈哈
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
body { height:100%; overflow-y:auto;}
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<body>
<div style="height:1000px; width:90%; margin:0px auto; background:#75cdfc">2222222</div>
<div id="menu">
DUMMY MENU
<a href="#" title="Dummy menu item">Mozilla</a>
<a href="#" title="Dummy menu item">Opera</a>
<a href="#" title="Dummy menu item">Netscape</a>

<a href="#bites" title="Dummy menu item">Firefox</a>
<a href="#" title="Dummy menu item">IE6</a>
<a href="#" title="Dummy menu item">Windows</a>
<a href="#" title="Dummy menu item">Style</a>
<a href="#" title="Dummy menu item">CSS</a>
<a href="comment_id=position fixed" title="Your comments">Comments</a>
</div>
</body>
</html>
时间： 2024-10-28 07:24:26

IE6固定定位底部且滚动时不晃动的相关文章

js页面滚动时层智能浮动定位实现(jQuery/MooTools)_jquery

一.应用展示 关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面滚动,如下: 随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了,如下图所示: 类似的效果在新浪微博上也有: 当页面滚动,新动态提示开始要淡出浏览器窗口的时候,其浮动于浏览器窗口的最上沿显示,如下图所示: 此效果实现原理其实很简单,本文就将展示其实现.  二.实现原理 默

jquery-用js写的固定定位的div，滚动滚动条的时候总是一闪一闪的？

问题描述 用js写的固定定位的div,滚动滚动条的时候总是一闪一闪的? 问题就是 我写的一个div层固定到浏览器顶部,然后滚动滚动条的时候,这个div总是突然距离浏览器顶部一小距离,然后就又回去了. div在滚动条上下滚动的时候总是上下偏移一下,在火狐下就没事,在其他浏览器下就有这样的问题.我是用绝对定位position:absolute;直接定位在body下的,滚动条滚动的时候去的是$(window).scrollTop的值,然后在赋给这个div的top的 解决方案 这个很简单的,可以直接使用

js页面滚动时层智能浮动定位实现

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

在ie6下如何实现可拖动的弹出层固定定位？

问题描述 在ie6下如何实现可拖动的弹出层固定定位? 我写了个弹出层,可以拖动的,在除 ie6 浏览器可以用 position: fixed,使弹出层固定定位.但是 ie6 下该怎么实现呢?因为它是能够拖动的,所以拖动后的位置是不确定的.求助

ASP.NET怎么设置gridview的样式让内容上下滚动时能固定表头

问题描述 各位大侠,求教:像这种左右可以左右拉动但是上下滚动时排头可以固定的gridview是怎么做的啊?在ASP.net中在线等贴,万分感谢! 解决方案 解决方案二:可以写样式控制.解决方案三:<scripttype="text/javascript">functions(){vart=document.getElementById("<%=GridView1.ClientID%>");vart2=t.cloneNode(true)for(

css IE6 position:fixed (固定定位)通过position：absolute的解决方案

css教程 ie6 position:fixed (固定定位)通过position:absolute的解决方案,完全使用position:absolute来解决固定定位问题.因为其他的浏览器都支持绝对定位,在ie6,7,8,9,ff,chrome中均测试通过.注意一点:不能给外包含的元素mod-test设置高度,不然的话,是没有滚动条的.而应该在里面设置一个容器,它设置一个高度  <!doctype html public "-//w3c//dtd xhtml 1.0 transition

网页设计技巧：跨浏览器的CSS固定定位

css|技巧|浏览器|设计|网页|网页设计 跨浏览器的CSS固定定位{position:fixed} 不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{position:fixed}来实现的,通过它可以让HTML元素脱离文档流固定在浏览器的某个位置. IE7.Firefox.Opera,都支持CSS的{position:fixed},所以很容易实现(

jQuery结合AJAX之在页面滚动时从服务器加载数据

  这篇文章主要介绍了jQuery结合AJAX之在页面滚动时从服务器加载数据,文中示例服务器端为C#程序,需要的朋友可以参考下 简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用户滚动滚动条再从服务器端加载. 背景 是Facebook促使我写出了在滚动条滚动时再从服务器加载数据的代码.浏览facebook时,我很惊讶的发现当我滚动页面时,新的来自服

jQuery结合AJAX之在页面滚动时从服务器加载数据_jquery

 简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用户滚动滚动条再从服务器端加载.背景 是Facebook促使我写出了在滚动条滚动时再从服务器加载数据的代码.浏览facebook时,我很惊讶的发现当我滚动页面时,新的来自服务器的数据开始插入到此现存的数据中.然后,对于用c#实现同样的功能,我在互联网上了查找了相关信息,但没有发现任何关于用c#实现这