真正完美解决IE6下position:fixed问题的方法{使用expression()没有抖动}

最新推荐文章于 2024-09-03 09:58:06 发布
最新推荐文章于 2024-09-03 09:58:06 发布
阅读量616 收藏
点赞数
分类专栏： HTML/JS/Css 文章标签： ie wrapper html 前端开发 xhtml scroll

    相信每个前端开发者都和我一样受着IE6的折磨...今天这篇文章帮助开发者解决一个开发中常见的IE6兼容问题。也许你觉得说现在谁还用IE6啊？但通过本人所运营的几个网站的Google Analytics得到的数据，通过IE6访问的人数比例高达40%多，其中一个传统行业更是达到了60%左右（IE8：20%、IE7：10%），自己汗一个。（上面提到的数据的日期是：2010/7/12）

废话不说了，切入正题

核心css代码：

 
 

  
  html {_background-image: url(about:blank); _background-attachment: fixed;/* prevent screen flash in IE6 */} 
 
 

 
 

  
  

 
 

 
 

  
  body 
  
  {
  
  background-attachment
  
  :
  
   scroll
  
  ;
  
  }
 
 

 
 

  
  
#base_wrapper
  
  {
  
  position
  
  :
  
  fixed
  
  ;
 
 

 
 

  
  	z-index
  
  :
  
  9999999
  
  ;
 
 

 
 

  
   	
  
  bottom
  
  :
  
  0
  
  ;
 
 

 
 

  
   	
  
  width
  
  :
  
  100%
  
  ;
 
 

 
 

  
   	
  
  _position
  
  :
  
   absolute
  
  ;
 
 

 
 

  
   	
  
  _top
  
  :
  
   expression(eval(
 
 

 
 

  
  		document.documentElement.scrollTop
 
 

 
 

  
  		+document.documentElement.clientHeight
 
 

 
 

  
  		-this.offsetHeight
 
 

 
 

  
  		-(parseInt(this.currentStyle.marginTop,10)||0)
 
 

 
 

  
  		-(parseInt(this.currentStyle.marginBottom,10)||0)
 
 

 
 

  
  	))
  
  ;
 
 

 
 

  
   
  
  }
 
 

 
 

  
  

 
 

 
 

  
  核心html代码：
 
 

 
 

  
  

 
 

 
 

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn" xml:lang="zh-cn">
<head>
<title>ice6 IE6方案</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
</head>
<body>
<div id="box"></div>
<div id="base_wrapper">随便弄点东西进来吧，这个方案我感觉比开心网和人人网用js控制的方案好，起码不用去用fadeIn、fadeOut去修复抖动</div>
</body>
</html>
 
 

 
 

  
  

 
 

 
 

  
  

 
 

 
 

  
  
这里有个demo，大家可以自行下载，随意使用。
连接地址：http://cid-cc55edbb0779c14a.office.live.com/self.aspx/.Public/BlogDemos/ie6PostionFixed.htm
原始方案链接：http://www.webmasterworld.com/css/3592524.htm ，文章题目为：
Position fixed in ie6 with "expression()" and no jittering
Why and how...
有兴趣的朋友去看这个英文版，比我这个详细的多，在这里做下搬运工一下（翻译都没翻译），只是希望可以帮助那些被这个问题困扰的朋友:)

 

btdf007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS定义position:fixed之后的div没有占据一行的解决办法
superman__007的博客
09-11 3859
方法，直接加上left:0;right:0即可。如下。 position: fixed; top: 20px; left: 0; right: 0; z-index: 666;
Chrome position:absolute 容器中嵌套的子元素position:fixed 一点bug
可遇，好孩子
12-20 5510
在chrome中，当然很少会遇到此情况. 父元素position:absolute而子元素：position:fixed时 打破了fix的位置固定, 修复此bug父元素加上，将流式滚动，去掉则继续fix效果 -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0);jsbin: http://jsbin.co
ie6使用expression模拟fixed定位
weixin_30339969的博客
12-03 83
<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> <style> html{ _background:url...
html css 悬浮 position:fixed,css position fixed固定底（兼容ie6）
weixin_39598954的博客
07-22 325
css position fixed在ie6中会有两种不兼容问题，一个是在ie下不滚动，另一个是在ie6会有闪动问题，下面我给大家来介绍固定与闪动解决办法。一般的 position:fixed; 实现方法以我的博客为例，在右下角 ... 这个 HTML 元素使用的 CSS 代码如下： 代码如下 复制代码#top{position:fixed;bottom:0;right:20px;}实现让 ....
详解IE6中的position：fixed问题与随滚动条滚动的效果
10-19
综合以上内容，我们可以知道，要解决IE6中的position: fixed问题，需要利用javascript表达式和特定的CSS滤镜语法，来模拟出其他浏览器中position: fixed所提供的效果。这种做法虽然复杂，但可以在不牺牲太多可读性...
IE6不兼容position:fixed属性的解决办法分享
09-25
总之，`position: fixed` 在 IE6 中的不兼容是前端开发中常见的问题，解决方法包括使用 CSS 表达式模拟和 JavaScript 插件。尽管这些方法能提供一定程度的兼容性，但随着技术进步，逐步淘汰对过时浏览器的支持，转而...
ie6下实现position:fixed效果实例介绍
09-25
在IE6浏览器中，`position:fixed`是一个棘手的问题，因为这个浏览器并不原生支持这一CSS定位方式。`position:fixed`允许元素相对于浏览器窗口进行定位，即使页面滚动，该元素仍然保持在屏幕的固定位置。这对于创建如...
IE6下position fixed失效的解决方法(亲测有效)
12-13
在IE6浏览器中，`position: fixed` 是一个常见的问题，因为这个版本的浏览器并不完全支持CSS中的`fixed`定位。`fixed`定位通常用于创建元素始终保持在视口的某个固定位置，例如导航栏、侧边栏或者弹出窗口。在其他...
IE6中的position:fixed定位兼容性写法分享
09-25
在标题和描述中提到的"IE6中的position:fixed定位兼容性写法"，实际上是一种利用JavaScript和CSS hack来模拟`position:fixed`效果的方法。下面，我们将详细探讨这些技术： 1. **HTML和CSS Hack**： 由于IE6的特性...
「深入理解」HTML Meta标签：网页元信息的配置
会思想的苇草i的博客
09-03 423
本文旨在详尽解析HTML中的Meta标签作用及其配置方法，帮助前端开发者更好地控制网页的元信息，包括搜索引擎优化（SEO）、视口设置、字符集定义以及社交媒体卡片的呈现。通过实例展示如何正确使用Meta标签来提升用户体验和网站的可访问性，使网站在不同的设备和平台上都能表现出色。
word文档转html(只支持段落和表格)
m0_63159822的博客
08-30 580
/ 这里简单地将单元格中的文本内容添加到HTML中。// 注意：单元格可能包含多个段落，需要遍历它们。// 辅助方法，用于获取段落中的文本内容。
HTML学习笔记——用HTML记录学习过程5-全局属性
qq_47968354的博客
08-27 377
全局属性可以用来配置元素的共有行为。
HTML沙漏爱心
兔子王
08-28 3905
用HTML语言实现炫酷的沙漏爱心。
使用itextpdf5.x将网页转为PDF,并添页眉页脚页码
qingqingzijinxin的专栏
08-23 361
itextpdf，html转pdf
【中科院1区】Matlab实现哈里斯鹰优化算法HHO-SAE实现故障诊断算法研究.rar
最新发布
09-03
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
A_Chrome_extension(mv3)_to_switch_between_differen_MapS
09-03
A_Chrome_extension(mv3)_to_switch_between_differen_MapSwitcher
解决CSS position:fixed 兼容问题
05-30
在不同浏览器中，`position: fixed` 的表现可能会有所不同，这可能会导致兼容性问题。以下是一些常见的解决方法： 1. 使用`position: absolute`替代`position: fixed`，并将父元素的`position`属性设置为`relative`。这个方法在某些情况下可以解决兼容性问题，但是可能会导致布局方面的问题。 2. 使用 JavaScript 来模拟 `position: fixed`。这种方法可以确保在所有浏览器中表现一致，但是可能会增加页面的加载时间，并且需要编写更多的代码。 3. 使用 CSS Hack。这种方法不是最优的选择，但是在某些情况下可能是必要的。例如，您可以使用以下 CSS 代码来针对不同的浏览器： ``` /* Firefox */ @-moz-document url-prefix() { .fixed-element { position: absolute; position: fixed; } } /* Safari */ @media screen and (-webkit-min-device-pixel-ratio:0) { .fixed-element { position: absolute; position: fixed; } } /* Internet Explorer */ @media \0screen { .fixed-element { position: absolute; position: fixed; } } ``` 总之，为了获得最佳的兼容性，最好避免使用 `position: fixed`，或者使用 JavaScript 来模拟它。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值