IE6 fixed的完美解决方案

第一种方法：纯CSS
目前网上有的比较多的是这种解决方案（纯CSS）：


代码如下:

html{overflow:hidden;}
body{height:100%;overflow:auto;}
#rightform form{position:absolute;right:30px;top50px;}

　　这个方法有一个bug未解决：在IE6下会把所有position:absolute都变成“浮动”的元素；还有使用js方法滚动滚动条时会出现对象闪烁，如下方法结合了CSS和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-Type" content="text/html; charset=gb2312" />
<title>IE6 fixed</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body {
_background-image: url(about:blank); /*用浏览器空白页面作为背景*/
_background-attachment: fixed; /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/
}
#topNav {
width: 980px;
z-index: 100; /*设置浮动层次*/
overflow: visible;
position: fixed;
top: 50px; /* 其他浏览器下定位，在这里可设置坐标*/
_position: absolute; /*IE6 用absolute模拟fixed*/
_top: expression(documentElement.scrollTop + 50 + "px"); /*IE6 动态设置top位置*/
/* documentElement.scrollTop 设置浮动元素始终在浏览器最顶，可以加一个数值达到排版效果 */
background-color:#0000FF;
height: 31px;
}
.show{
position:absolute;
top:500px;
left:400px;
border:#ff0000 1px solid;
}
</style>
</head>
<body>
<div class="jd_menu" id="topNav">1111</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="show">show</div>
</body>
</html>

只实现了垂直方向的fixed。若要实现水平方向的fixed，设置_left:expression(documentElement.scrollLeft + "px");
　　利用给<body>设置固定的背景，防止滚动条滚动时的闪动；如果<body>中要设置滚动的背景而产生冲突，可以把代码写在html选择器里面，如：


代码如下:

html {
_background-image: url(about:blank);
_background-attachment: fixed; /* prevent screen flash in IE6 */
}
body {
background-image: url(1.jpg);
background-attachment: scroll;
}

第二种方法 JavaScript


代码如下:

<!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-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{ margin:0px; padding:0px; font-size:12px; line-height:22px;}
p{ margin:0px; padding:36px;}
.float2{ position:absolute; padding:26px; border:#999999 3px solid; background-color:#3399FF; right:200px; top:200px;}
.fixed{ position:absolute; right:60px; top:100px; border:#666666 3px solid; background-color:#CCCCCC; padding:26px;}
</style>
<script language="javascript" type="text/javascript">
window.onload=function(){
var n=100; //top值
var obj=document.getElementById("fixed"); //position:fixed对象
window.onscroll=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';}
window.onresize=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';}
}
</script>
<title>position_fixed测试</title>
</head>
<body>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<div class="float2">浮动的内容2</div>
<div class="fixed" id="fixed">我的位置是固定的！拉动滚动条看效果。</div>
</body>
</html>

ie6对postion:fixed的完美解决方案
今天去一老外站看到了这他站上的十分平滑但却没有js，好奇，原来。。巧妙啊，分享下，相对而言比较节省资源。但效果好，使用方便，兼顾w3c。哈哈
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]><link rel="stylesheet" href="ie-stuff.css" type="text/css" media="screen"/><![endif]-->
ie-stuff.css


代码如下:

#footer {
position: absolute;
bottom: auto;
clear: both;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight) - 1
: document.body.scrollTop
+(document.body.clientHeight-this.clientHeight) - 1);
}

赞 (0)

相关推荐

  • javascript ie6兼容position:fixed实现思路

    positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置 网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这种定位 浮动导航条的样式,重要的是position:fixed;bottom:60px;(浮动导航底部距离窗口底部60px) 复制代码 代码如下: .floating_9677{position:fixed; z-index:961; bottom:60px;} ie6下positon:fixed不起作用,只能靠js来实现了,首先在ie6下需要将posi

  • 跨浏览器的实践:position:fixed 层的固定定位

    看示例吧: <style type="text/css"> body{ margin:0; padding:30px 0 0 0; } div#menu{ position:absolute; top:0; left:0; width:100%; height:30px; background-color:#ddd; } @media screen{ body>div#menu{ position:fixed; } } * html body{ overflow:hi

  • IE6支持position:fixed完美解决方法

    今天去一老外站看到了这他站上的十分平滑但却没有js,好奇,原来..巧妙啊,分享下,相对而言比较节省资源.但效果好,使用方便,兼顾w3c.哈哈 复制代码 代码如下: <!-- compliance patch for microsoft browsers --> <!--[if lt IE 7]><link rel="stylesheet" href="ie-stuff.css" type="text/css" med

  • JavaScript toFixed() 方法

    定义和用法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 语法 NumberObject.toFixed(num)num 必需.规定小数的位数,是 0 ~ 20 之间的值,包括 0 和 20,有些实现可以支持更大的数值范围.如果省略了该参数,将用 0 代替. 返回值 返回 NumberObject 的字符串表示,不采用指数计数法,小数点后有固定的 num 位数字.如果必要,该数字会被舍入,也可以用 0 补足,以便它达到指定的长度.如果 num 大于 le+21,则该

  • capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框

    capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框

    效果图:当浏览器滚动的时候,要浮层要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了,position:fixed,可以在IE7+和其他浏览器下浮动层平滑固定定位,由于IE6前辈不支持fixed属性,使用position:absolute属性代替,重新计算top值. 具体代码如下: HTML代码: 复制代码 代码如下: <div class="float" id="float"> <p id="WB_

  • iphone safari不支持position fixed的解决方法

    需求是这样的,许多pc web页面的导航都是固定的,比如google的首页,现在要将这种固定的导航转移到mobile web下,很自然地就会想到position:fixed; bottom: 0,android下运行正常,但在iphone safari下就会出现问题,当滚动条滚动时,导航条就会出现屏幕的上方,黑乎乎的一块,很不协调.许多人推荐iscroll.jquery mobile等框架,但有时效果不如意或是得阅读框架源码进行二次开发,会花费好长一段时间的.经过一段时间的研究,找到了一种解决办

  • JS中toFixed()方法引起的问题如何解决

    最近发现JS当中toFixed()方法存在一些问题,采用原生的Number对象的原型对象上的toFixed()方法时,规则并不是所谓的"四舍五入"或者是"四舍六入五成双",所谓"四舍六入五成双",在百度百科上给的解释是:也即"4舍6入5凑偶"这里"四"是指≤4 时舍去,"六"是指≥6时进上,"五"指的是根据5后面的数字来定,当5后有数时,舍5入1:当5后无有效数字时,

  • IE6 fixed的完美解决方案

    第一种方法:纯CSS 目前网上有的比较多的是这种解决方案(纯CSS): 复制代码 代码如下: html{overflow:hidden;} body{height:100%;overflow:auto;} #rightform form{position:absolute;right:30px;top50px;} 这个方法有一个bug未解决:在IE6下会把所有position:absolute都变成"浮动"的元素:还有使用js方法滚动滚动条时会出现对象闪烁,如下方法结合了CSS和js的

  • Javascript 判断函数类型完美解决方案

    但是,有一些细节并不为我们所熟知.John Resig 在分析了这些细节之后,为我们提供了一个完美的解决方案,本文将作详细介绍: 一.传统方法不为人所知的细节 毫无疑问,在判断函数类型时,我们使用的是typeof方法,比如: 复制代码 代码如下: function fn(){ //content } alert(typeof fn)//结果是"function". 但是,该方法在一些浏览器中并不是像我们想像的那样工作. 1.Firefox2和Firefox3 在这两个浏览器中,用typ

  • Ajax跨域的完美解决方案

    公司要做一个活动页面,在其过程中发现所有的接口,ajax请求跨域.这里对跨域做个简单介绍以及提供几种解决办法. 由于浏览器实现的同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,所以AJAX是不允许跨域的.这里提供自己常用的三种方法: 1.jsonp访问 JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问: 实现方式 1) <

  • Ubuntu Server 16.04安装MySQL设置远程访问出现问题的完美解决方案(error:10061)

    说明: 一个朋友在使用Ubuntu Server 16.04安装MySQL,设置远程访问的时候出现了问题,请我帮忙.但是,我也没有使用过Ubuntu安装MySQL,于是乎搜索了很多技术文件,比着葫芦画瓢.但是,由于MySQL版本的差异,导致在安装设置的过程中出现了一些问题:就是不能远程访问. 一.安装mysql 1. 安装需要使用root账号,如果不会设置root账号的请参考Linux公社的其他文章.安装mysql过程中,需要设置mysql的root账号的密码,不要忽略了. sudo apt-g

  • Java Web开发防止多用户重复登录的完美解决方案

    Java Web开发防止多用户重复登录的完美解决方案

    目前web项目中,很多情况都是可以让同一个账户信息在不同的登录入口登录这次,这样子就不那么美好了. 推荐阅读: Java 多用户登录限制的实现方法 现在有两种解决方案: 1.将用户的登录信息用一个标志位的字段保存起来,每次登录成功就标记1,注销登录就标记为0,当标记为1的时候不允许别人登录. 2.将用户的登录信息保存在application内置作用域内, 然后利用session监听器监听每一个登录用户的登录情况. 很显然,第一种方式 每次登录 都需要操作数据库,多了一些不必要的性能开销,而且在登

  • Windows 64位下装安装Oracle 11g，PLSQL Developer的配置问题,数据库显示空白的完美解决方案(图文教程)

    Windows 64位下装安装Oracle 11g，PLSQL Developer的配置问题,数据库显示空白的完美解决方案(图文教程)

    安装pl sql 后,若下图的数据库处为空.则需要安装32位的客户端,说明pl sql不支持64位客户端连接. 解决办法: 1.下载32位Oracle客户端,并安装 2.设置PLSQL Developer 打开pl sql 在"工具" - "首选项" - "连接"中,设置 OCI库 (即oracle 32位的安装位置) D:\app\Administrator\product\11.2.0\client_1\oci.dll 如下图: 3.添加环境

  • JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件

    JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件

    dotNetFlexGrid是一款asp.net原生的异步表格控件,他的前身是Jquery FlexiGrid插件,我们重构了FlexiGrid的大部分Javascript代码,使其工作的更有效率,BUG更少:同时将其封装为dotNet控件,提供了简单易用的使用方式. dotNetFlexGrid扩展和优化了FlexiGrid原有的功能,并提供了更多具有针对性的功能,使用dotNetFlexGrid,您的用户可以轻松拥有如下功能 提供简易的方式自行调整表格列宽 根据实际情况调整表格的大小 针对合

  • Android 6.0调用相机图册崩溃的完美解决方案

    最近客户更新系统发现,以前的项目在调用相机的时候,闪退掉了,很奇怪,后来查阅后发现,Android 6.0以后需要程序授权相机权限,默认会给出提示,让用户授权,个人感觉这一特性很好,大概如下: 导入Android V4, V7包! Android Studio 导入很简单,右键项目后找到dependency就ok了. 继承AppCompatActivity public class MainActivity extends AppCompatActivity 引入需要的类库 import and

  • 浅谈android获取设备唯一标识完美解决方案

    本文介绍了浅谈android获取设备唯一标识完美解决方案,分享给大家,具体如下: /** * deviceID的组成为:渠道标志+识别符来源标志+hash后的终端识别符 * * 渠道标志为: * 1,andriod(a) * * 识别符来源标志: * 1, wifi mac地址(wifi): * 2, IMEI(imei): * 3, 序列号(sn): * 4, id:随机码.若前面的都取不到时,则随机生成一个随机码,需要缓存. * * @param context * @return */ p

  • MySql版本问题sql_mode=only_full_group_by的完美解决方案

    1.查看sql_mode select @@sql_mode 查询出来的值为: ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION 2.去掉ONLY_FULL_GROUP_BY,重新设置值. set @@sql_mode ='STRICT_TRANS_TABLES,NO_ZE

随机推荐