html中fixed属性,解决css的position:fixed属性的兼容问题

最新推荐文章于 2025-06-07 20:47:06 发布
最新推荐文章于 2025-06-07 20:47:06 发布
阅读量563 收藏
点赞数
文章标签： html中fixed属性
本文介绍了如何处理CSS中position:fixed在IE6浏览器下不生效的问题。通过使用特定的hack技巧，如_position:absolute结合_expression表达式，实现了在IE6下的固定定位效果。同时，为了防止闪烁，引入了背景图片和背景附件的设置。这种方法为开发者提供了在旧版IE浏览器中实现fixed定位的一种解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

因为css的position：fixed属性在ie6下是无效的， 所以需要用到一种可行的解决方案， 发现在渴切css框架中，兼容IE6的定位属性fixed，固定不动样式，解决了这一问题，并且给了很详尽的描述，下面将CSS代码摘录给大家：.fixed{

position:fixed;

clip:rect(0 100% 100% 0);

_position:absolute;

/* 底部 */

bottom:0px;

left:0px;

_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);

/*_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);*/

/* 左侧 */

/*left:0px;*/

/*_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);*/

/*_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);*/

}

/* 解决固定层在IE6下闪的问题 */

*html{

background-image:url(about:blank);

background-attachment:fixed;

}

阎立夫
关注
position:fixed;
m0_37972548的博客
12-26 4万+
为什么设置position：fixed；div会消失。 此文如有不正确的地方，敬请留言指出，谢谢。 1.position:fixed;作用 生成绝对定位的元素，相对于浏览器窗口进行定位。可以通过设置 "left", "top", "right" 以及 "bottom" 属性给目标元素定位。 例如：将id = content 的div固定在窗口底部，距离窗口左边距离200px。滚动条上下滚动
html5实现输入框fixed定位在屏幕最底部兼容性
11-19
1、问题由来 做h5 已经有很长一段时间了，现在做的工作h5比pc上的更多，曾经解决pc端IE各个版本的兼容性也是伤透脑筋，原以为h5的会更好，殊不知，还有更头疼的问题，当设计师要设计一个聊天窗口，把输入框定位在最底部，这是再常见不过的问题了吧，举例： 上图就是我最近做的一个功能，原以为是很简单的一个定位功能，但是没想到牛逼的测试居然用各种iphone，各种安卓，各种浏览器（qq浏览器、safari、opera等浏览器），各种输入法（系统自带、搜狗输入法），测出来一大堆问题，最后经过千辛万苦，终于做到了能大致兼容。 2、初步解决 1）、结构布局于第一次解决 //1部分css .heade
解决CSS position:fixed 抖动问题
07-11 785
将id为head的div固定在最顶部，所设置的CSS属性如下： #head { overflow:hidden; *zoom:1; height:44px; background-image:url(../Img/bg.png); position:fixed; z-index:500; width:100%; ...
css的定位（position）详解：相对定位 绝对定位 固定定位
最新发布
weixin_51762789的博客
06-07 1222
定位模式是否脱离文档流定位基准top/left作用static否文档流默认位置无效relative否自身原始位置相对于自身偏移absolute是最近的已定位祖先元素或视口相对于基准元素偏移fixed是浏览器视口相对于视口固定位置sticky部分（粘性时）正常流时为自身，粘性时为视口滚动到阈值时固定。
position:fixed
wangxiaohui6687的专栏
09-13 671
在淘宝的列表页上有个列表排序的工具条，这个工具条默认显示是正常的，如图 ，当滚动条往下拖动到该工具条的时候，改工具条就会始终固定在浏览器的顶部，就是position:fixed效果。 如图： 在当滚动条往上拖动的时候就会恢复原样，（可能表述不清楚，大家上淘宝自己去看吧。） 以前很讨厌这个效果，不习惯。最近感觉这样的工具条效果还真不错。所以今天尝试的自己弄了一
CSS-fixed兼容
weixin_30408675的博客
04-17 90
解决IE6中闪动问题 *{background-image:url(about:blank);background-attachment:fixed;} body{ background-image:url(about:blank);background-attachment:fixed; background-color: #e3d8c6; } 右侧距顶部45...
fixed定位兼容性
a560694091的博客
07-28 268
不过从ios5.1以来，fixed定位就已经支持了，但很遗憾，ios现在对它还只是半支持。 但是在某些情况下，会出现一些比较奇葩的问题，比如fixed元素中存在输入框子元素，这个时候就会跪了。 可以看到，fixed定位的元素跑到中间去了，这种问题一般出现在页面有scrollTop并且输入框获得了焦点的情况下！ 怎么解决这种问题呢？我目前知道的主要有三种办法，假设HTML代码结构为：...
css中position:fixed实现div居中上下左右居中
09-25
在这段CSS代码中，首先设置了.dialog类的position属性为fixed，确保该DIV相对于视口定位。接着，通过设置top: 50%和left: 50%属性，将DIV元素的左上角定位到视口的中心位置。然后，通过设置margin负值来调整DIV元素...
IE6不兼容position:fixed属性的解决办法分享
01-21
及上下两边，共四种位置的固定，与以往的教程不同的地方是，它使用CSS表达式来兼容IE5、IE6，且避免了js模拟时，拖动滚动条时出现抖动的问题，另外在IE5或者怪癖模式下也完全正常，没有任何问题。如果你有更好的方案...
JS解决position:sticky的兼容性问题的方法
11-30
在前端开发中，`position: sticky` 是一种CSS布局属性，它允许元素在滚动到某个阈值时在页面上保持“粘性”。然而，`position: sticky` 在某些浏览器，尤其是旧版本的Android设备上可能存在兼容性问题。为了解决这个...
使用CSS样式position:fixed水平滚动的方法
09-04
在网页设计中，CSS的`position:fixed`属性通常用于创建元素的固定定位，使得元素在页面滚动时始终保持在屏幕的某个位置。然而，当页面存在水平滚动条时，`position:fixed`元素仅能实现垂直方向的固定，而无法实现...
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
本文探讨了在使用CSS定位属性position: fixed的同时，给同级元素添加margin-top所产生的布局问题，并提供了一些解决方案。 在HTML文档结构中，通常将元素分为头部（header）、内容区（content）、侧边栏（aside）和...
css中position 定位的兼容性，以及定位的使用及层级的应用
weixin_34077371的博客
07-31 520
一、首先我们来看看定位的兼容性，当然是在IE6、7但是现在大多数公司都已经不考虑了 我们就作为一个了解吧： 1、在IE67下,子元素有相对定位的话,父级的overflow:hidden包不住子元素 解决办法: 给父级也加相对定位 2、在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差 解决办法: 父级不要设置双数。 这里就不上代码给大...
position：fixed固定定位的用法
demin3278的博客
01-03 6590
一、position：fixed；固定定位 　　1.实现某个元素在可视窗口的居中位置显示 　　　　1）给自身设置宽高； 　　　　2）给自身加position：fixed； 　　　　3）用margin向左移动自身宽度的一半，向上移动自身高度的一半； 　　或： 　　　　1）给自身设置宽高； 　　　　2）再设置position：fixed； 　　　　3）再给自身设置left：0...
CSS中的固定定位position: fixed；
weixin_72303943的博客
07-06 271
CSS中的固定定位position: fixed;
css中position:fixed;
bymyself11的专栏
07-28 367
元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动： 如果我们想国定一个元素就可以使用这个属性。如：把一个一个div固定在右下角显示。
position:fixed 固定定位
热门推荐
asdfgv2022的博客
08-03 5万+
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：特性特性：1.元素脱离正常文档流，不占位(也脱离文本流，全脱)2.始终相对于浏览器窗口四个角为原点进行固定定位的3.不会随页面的内容滚动而滚动4.能使不能设置宽高的行级元素设置宽高5.提升层级6.如果没有定位偏移属性，对元素本身有影响；应用场景：相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏...
解决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、付费专栏及课程。

余额充值