HTML IE6 纯CSS 解决 position fixed 的问题

最新推荐文章于 2021-12-01 00:28:08 发布
最新推荐文章于 2021-12-01 00:28:08 发布
阅读量83 收藏
点赞数
分类专栏： 境-HTML 文章标签： IE6 纯CSS 解决 position fixed 的问题 ie6解决position fixe ie hack 
<!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" />
<title></title>
<style type="text/css">
.ie6fixed {border: 1px solid red; padding: 5px;}
/* 修正IE6振动bug */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
.ie6fixedLT{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
.ie6fixedRT{position:absolute;right:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
.ie6fixedLB{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}
.ie6fixedRB{position:absolute;right:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}
html>body .ie6fixedLT{position:fixed;left:0;top:0}
html>body .ie6fixedRT{position:fixed;right:0;top:0}
html>body .ie6fixedLB{position:fixed;left:0;bottom:0}
html>body .ie6fixedRB{position:fixed;right:0;bottom:0}
</style>
</head>
<body>
<div class="ie6fixedLT ie6fixed">IE6完美兼容position:fixed1</div>
<div class="ie6fixedRT ie6fixed">IE6完美兼容position:fixed2</div>
<div class="ie6fixedLB ie6fixed">IE6完美兼容position:fixed3</div>
<div class="ie6fixedRB ie6fixed">IE6完美兼容position:fixed4</div>
<div style="height: 3000px;"></div>
</body>
</html>

 

效果图：

 

 

 

 

 

 

 

iteye_17658
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-position: fixed固定定位
主营前端方向，技术栈是vue
11-15 488
position: fixed固定定位(绝对定位一种，根据浏览器窗口点位不随滚动条滚动)
解决 IE6 position:fixed 固定定位问题
pclook的专栏
11-09 370
<br />就像你所遇到的问题一样， IE6 有太多的 bug 让制作网页的人头疼。这篇文章介绍的是介绍我的如何解决 IE6 不支持 position:fixed; 属性的办法。<br /><br /> 关于 position:fixed; 属性<br /> 生成绝对定位的元素，相对于浏览器窗口进行定位。<br /> 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。<br /><br /> position:fixed; 可以让网页上的某个元素固定
移动端 position:fixed; 定位在iOS系统上失效，该怎么解决
贵林之恋的博客
01-30 4万+
今天公司运营人员在苹果手机上浏览页面时发现一个bug，就是根据浏览器窗口position:fixed; 定位在底部的元素，会随着屏幕的滚动而滚动，在iOS系统上失效，随后让我改。自己在网上搜了一些解决办法，最终觉得以下办法相对简单。如果有更简单的办法，欢迎各位大神互相交流，解决办法如下： html我就不写了，有兴趣的可以看看我修改的项目点击打开链接 把需要用手滑动的内容用clss为.conte
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;}实现让 ....
css position fixed 居中,css3 position fixed居中的问题
weixin_29725791的博客
08-04 521
通常，我们要让某元素居中，会这样做：#element{margin:0 auto;}如果还想让此元素位置固定呢？一般我们会添加position:fixed，如下：#element{position:fixed;margin:0 auto;}但是这样做的结果就是，元素不居中了。这说明fixed使解决方案：#element{position:fixed;margin:0 auto;left:0;rig...
html中fixed属性,解决css的position:fixed属性的兼容问题
weixin_34445112的博客
06-05 454
因为css的position：fixed属性在ie6下是无效的， 所以需要用到一种可行的解决方案， 发现在渴切css框架中，兼容IE6的定位属性fixed，固定不动样式，解决了这一问题，并且给了很详尽的描述，下面将CSS代码摘录给大家：.fixed{position:fixed;clip:rect(0100%100%0);_position:absolute;/*底部*/bottom:0...
【CSS】IE6中的position：fixed问题与随滚动条滚动的效果
编程记录，亲测有效
10-22 1747
上次在《【jQuery】兼容IE6的滚动监听》（点击打开链接）提及到解决IE6fixed问题，具体是要引入一个js文件，还要声明一条脚本就为这个div声明fixed定位去解决，起始这样很不好啊。引入的Javascript不好管理之余，还要在head声明引入javascript，之后又要给这个div声明一个id，之后又要在脚本出弄一条声明，实在是烦死了。 使用position：fixed无非是想做
纯HTML+CSS网页设计期末作业（个人网站）
热门推荐
weixin_47138646的博客
11-14 31万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
CSS--解决position: absolute无效的问题
IT利刃出鞘的博客
12-01 9937
本文介绍CSS进行定位时使用 position:absolute （绝对定位）却不起作用的问题。 需求：已有一个外层的元素（class为"container"），这个外层元素已经设置了margin，现在有一个元素（class为"test"），放在这个外层元素里边，想要基于这个外层元素的margin进行绝对定位。
css position fixed 居中,css中position:fixed实现div居中上下左右居中
weixin_34915171的博客
08-04 1312
上下左右 居中代码如下div{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;width:200px;height:150px;}如果只需要左右居中，那么把 bottom:0; 或者 top:0; 删掉即可如果只需要上下居中，那么把 left:0; 或者 right:0; 即可下面附一个DIV 元素在浏览器窗口居中其实，实现这个效果...
css3 position fixed固定居中问题解决方案
09-25
总之，解决 `position: fixed` 元素居中问题的关键在于理解 `fixed` 定位的工作原理，以及如何通过调整 `left` 和 `right` 属性来适应不同浏览器的兼容性需求。在实际项目中，还需要考虑使用现代前端工具和最佳实践...
CSS表达式(expression)解决IE6 position:fixed无效问题
09-25
本文将详细讲解如何使用CSS表达式（expression）来解决IE6中`position:fixed`无效的问题。 首先，我们来看一个常见的解决方法。在非IE6浏览器中，`position:fixed`可以直接应用到元素上，如下所示： ```css #gs { ...
IE6支持position:fixed完美解决方法
10-30
本文将介绍一种更优雅、资源效率更高的方法来解决IE6对`position:fixed`的支持问题，这种方法是通过条件注释和CSS表达式来实现的。 首先，我们可以使用HTML的条件注释（Conditional Comments）来针对IE6加载特定的...
ie6 position:fixed解决方案
12-09
在早期的Internet Explorer 6（简称IE6）浏览器中，CSS中的`position: fixed;`属性并不被支持，导致开发者无法实现元素固定在屏幕某个位置的效果。为了解决这一问题，社区开发出了几种不同的解决方案，主要分为纯CSS...
培训课件 -从0到1搭建培训管理体系.pptx
07-13
培训课件 -从0到1搭建培训管理体系.pptx
tensorflow-gpu-2.9.0-cp37-cp37m-win-amd64.whl.zip.(whl)
最新发布
07-14
使用时需去掉后缀.(whl)后再解压
JavaScript：ES6新特性深入解析
07-14
JavaScript：ES6新特性深入解析
Go：Go语言项目实战教程
07-14
Go：Go语言项目实战教程
解决CSS position:fixed 兼容问题
05-31
CSS中的position:fixed属性用于将元素固定在浏览器窗口的某个位置，无论滚动条如何滚动，该元素都会保持不变。但是，该属性在不同的浏览器中有不同的兼容性问题，下面介绍几种解决方法。 1. IE6兼容问题 IE6不支持...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值