ie6不兼容position：fixed的解决方法

最新推荐文章于 2021-07-22 00:46:07 发布
最新推荐文章于 2021-07-22 00:46:07 发布
阅读量697 收藏
点赞数
分类专栏： div+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mm9mm8/article/details/17933685
版权 
<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>Untitled Document</title>

<style>
body { margin:0; padding:0;}
#nav { width:100%; height:50px; background:#000;}
.main { width:980px; background:#FFC; margin:0 auto;padding-top:50px;}
.fixed { position:fixed; top:0; left:0;}
.ie6fixed { _position:absolute; _margin-top: 0; _left:expression(eval(document.documentElement.scrollLeft));_top:expression(eval(document.documentElement.scrollTop));} /* ie6 fixed hack */}
* body {background-image:url(about:blank);background-attachment:fixed;}/* 使ie6fixed屏幕不闪 */

</style>
</head>

<body>
<div id="nav" class="fixed ie6fixed">
</div>
<div class="main">
  <p>_____________________</p>
  <p> </p>
  <p>aa</p>
  <p>_____________________</p>
  <p> </p>
  <p>aa</p>
  <p>_____________________</p>
  <p> </p>
  <p>aa</p>
   <p>_____________________</p>
  <p> </p>
  <p>aa</p>
  <p>_____________________</p>
  <p> </p>
  <p>aa</p>
  <p>_____________________</p>
  <p> </p>
  <p>aa</p>
   <p>_____________________</p>
  <p> </p>
  <p>aa</p>
  <p>_____________________</p>
  <p> </p>
  <p>aa</p>
  <p>_____________________</p>
  <p> </p>
  <p>aa</p>
   <p>_____________________</p>
  <p> </p>
  <p>aa</p>
  <p>_____________________</p>
  <p> </p>
  <p>aa</p>
  <p>_____________________</p>
  <p> </p>
  <p>aa</p>
   <p>_____________________</p>
  <p> </p>
  <p>aa</p>
  <p>_____________________</p>
  <p> </p>
  <p>aa</p>
  <p>_____________________</p>
  <p> </p>
  <p>aa</p>
   <p>_____________________</p>
  <p> </p>
  <p>aa</p>
  <p>_____________________</p>
  <p> </p>
  <p>aa</p>
  <p>_____________________</p>
  <p> </p>
  <p>aa</p>
</div>
</body>
</html>


KeevaJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IE6不兼容position:fixed属性的解决办法分享
01-21
及上下两边，共四种位置的固定，与以往的教程不同的地方是，它使用CSS表达式来兼容IE5、IE6，且避免了js模拟时，拖动滚动条时出现抖动的问题，另外在IE5或者怪癖模式下也完全正常，没有任何问题。如果你有更好的方案...
IE6支持position:fixed完美解决方法
10-30
本文将介绍一种更优雅、资源效率更高的方法来解决IE6对`position:fixed`的支持问题，这种方法是通过条件注释和CSS表达式来实现的。 首先，我们可以使用HTML的条件注释（Conditional Comments）来针对IE6加载特定的...
解决CSS position:fixed 抖动问题
07-11 695
将id为head的div固定在最顶部，所设置的CSS属性如下： #head { overflow:hidden; *zoom:1; height:44px; background-image:url(../Img/bg.png); position:fixed; z-index:500; width:100%; ...
js完美解决IE6不支持position:fixed的bug
10-24
总的来说，解决IE6不支持`position:fixed`的bug需要开发者具备深厚的前端知识，包括CSS兼容性、CSS Hack以及对JavaScript表达式的理解。同时，也需要权衡性能与兼容性的关系，适时地做出技术决策，以适应不断变化的...
javascript ie6兼容position:fixed实现思路
12-02
然而，不幸的是，Internet Explorer 6 (IE6) 并不支持 `position:fixed`，这就给开发者带来了兼容性问题。 为了解决IE6中的这个问题，通常需要借助JavaScript来模拟 `position:fixed` 的效果。以下是一个实现兼容性...
项目中遇到的小问题，position:fixed无效的一种情况
古语静水流深
05-06 2万+
position: fixed;无效
小技巧css解决移动端ios不兼容position:fixed属性，无需插件
热门推荐
小白努力走
10-15 15万+
ios运用position:fixed会错位，css一行样式巧妙解决定位问题。
html css 悬浮 position:fixed,css position fixed固定底（兼容ie6）
weixin_39598954的博客
07-22 313
css position fixed在ie6中会有两种不兼容问题，一个是在ie下不滚动，另一个是在ie6会有闪动问题，下面我给大家来介绍固定与闪动解决办法。一般的 position:fixed; 实现方法以我的博客为例，在右下角 ... 这个 HTML 元素使用的 CSS 代码如下： 代码如下 复制代码#top{position:fixed;bottom:0;right:20px;}实现让 ....
解决IE不支持position:fixed问题
hmonkey915的专栏
02-28 4037
页面上需要一个固定位置的块，不论页面怎么滚动，始终停在它的位置，比如“返回顶部”、“给建议”、“分享按钮”、“广告”等等。css中有position: fixed;可以直接用。IE确不支持，有没有好的办法解决 评论 (1) • 分享 • 链接 • 2012-02-03 0 这个兼容性问题通常是采用JS+绝对定位方式处理 – xiaomi 2012-02-0
position:fixed失效的问题
过宁妍的专栏
08-18 1万+
这几天做了一个手机端的demo（滑动推屏的那种），在底部放了一个div，position:fixed，bottom：0. 为了让动画性能更加，在body上加上了transform：translate3d(0,0,0),然后又调了一个js文件，这下问题来了，本来应该悬浮在底部的div不见了！！！推到底，发现出现在了最后一页的底部。。。 难道是position:fixed失效了？？？ 查了资料发
给fixed定位的图片设置一个半透明的遮罩层
weixin_42178670的博客
04-28 318
给图片fixed定位在页面水平居中 .img-item{ position: fixed; margin: 0 auto; top: 10%; left: 0; bottom: 0; right: 0; z-index: 10 } 设置遮罩层 .img-item::before{ content: " "; width: 100%; height: 100%; position: fixed; background: rgba(0,0
position:fixed;实现底层页面不跟随浮层模块滚动
liudan123012的博客
04-15 1万+
由于工作需要，在首页做一个搜索浮层，要求浮层全屏显示（即：width:100%;height:100%;）。当页面内容超出屏幕高度时，页面添加滚动条（overflow:scroll;）。                  搜索页面（浮层）代码：         可是问题是，当我们滑动到浮层底部或顶部时，底层页面（首页）也会跟着滑动，那么就会出现底层页面的滚动条。
受tansform影响导致固定定位position: fixed;失效
凌风的博客
07-10 2029
https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/ 如果一个元素设置了position:fixed;其父元素设置了tansform属性的话，不管是scale()、rotate()、还是translate()，其fixed值都会失效，直接会使position:fixed;变成position:absolute;的效果...
2016/2/19 position： fixed absolute relative z-index float 半透明效果
weixin_30588827的博客
02-20 93
一、position：fixed 　　锁定位置（相对于浏览器的位置），例如有些网站的右下角的弹出窗口。 显示效果 无论滚动条怎么移动 都固定在显示页面的一个位置不动 二、position：absolute 　　1.外层没有position：absolute（或relative）；那么div相对于浏览器定位，如下图中b（距离浏览器右边框为50像素，距离下边框为2...
position:fixed 在ie8下的兼容性处理(附带ie8以下不透明度兼容)
lihaofeifei的博客
09-19 2142
1、解决fixed兼容性核心代码： .ie{ _position: absolute; _clear: both; _top:expression(eval(document.compatMode &amp;&amp; document.compatMode=='CSS1Compat') ? ...
解决CSS position:fixed 兼容问题
最新发布
05-31
CSS中的position:fixed属性用于将元素固定在浏览器窗口的某个位置，无论滚动条如何滚动，该元素都会保持不变。但是，该属性在不同的浏览器中有不同的兼容性问题，下面介绍几种解决方法。 1. IE6兼容问题 IE6不支持position:fixed属性，可以使用position:absolute加javascript实现。 ``` <style> #fixedDiv { position: absolute; right: 0; bottom: 0; } </style> <script> window.onscroll = function() { var top = document.documentElement.scrollTop || document.body.scrollTop; document.getElementById("fixedDiv").style.top = (top + document.documentElement.clientHeight - document.getElementById("fixedDiv").offsetHeight) + "px"; } </script> <div id="fixedDiv">我是fixed元素</div> ``` 2. 其他浏览器兼容问题 其他浏览器中，position:fixed属性很好用，但是如果在某些情况下，fixed元素的父元素设置了transform属性，会导致fixed元素表现异常。可以使用position:sticky属性代替。 ``` <style> #fixedDiv { position: sticky; position: -webkit-sticky; /* Safari */ top: 0; background: #fff; } </style> <div id="fixedDiv">我是fixed元素</div> ``` 另外，还可以使用JavaScript来实现fixed效果，但是需要考虑到性能问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值