固定浮动窗positioin:fixed浏览器(IE6 IE7 IE8 IE9 Chrome Firfox)兼容性解决方案

原创 2012年03月29日 15:58:08

固定浮动窗就是固定在浏览器某个位置,不随滚动条而变动的窗体。

先贴代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#fixed{position:fixed;top:5em;right:0;}
</style>
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:30px;top:expression(eval(document.body.scrollTop + 50));}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>

简单解析:

对于firfox,chrome或者IE8、9等,使用

{position:fixed;top:5em;right:0;}
就可以直接搞定,其中可用left、right、top、bottom指定位置,随意一个横向的(left或者right)和一个纵向的(top或者bottom)就可以确定位置,就像数学中的x、y坐标就可确定一个点一样。

对于IE6等就得使用额外的

html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:30px;top:expression(eval(document.body.scrollTop + 50));}

这些是放在
<!--><!-->之间的

IE不会把它当做注释符,所以会定义新的#fixed,覆盖先前的,并且这样的css只在IE下可用,其他浏览器不识别,巧的是其他浏览器又把

<!--><!-->

当做注释符,就不会解析里面的css。从而达到兼容的目的。其中
<!--[if IE 6]>
...
<![endif]-->

是一种语法,哪位高手可以指点下




                

小技巧css解决移动端ios不兼容position:fixed属性,无需插件

ios运用position:fixed会错位,css一行样式巧妙解决定位问题。
  • liu__hua
  • liu__hua
  • 2014年10月15日 09:34
  • 105134

几种解决position:fixed 抖动的方法

最近在给客户做的手机版网站中用到了position:fixed 来模拟手机APP的底部的导航条,但是在三星手机的浏览器上出现了 抖动的情况,类似于下图这种情况:   在下滑的过程中,底部导...
  • zx_001
  • zx_001
  • 2015年12月14日 14:19
  • 8906

Android系统中 webkit 内核浏览器position:fixed所造成的兼容问题

背景概述 Google已经在Mobile Web App开发上取得了很大的突破. HTML5已经拉近了Mobile设备Native App与Web App的差距. mobile Gmail 正是...
  • yaoduren
  • yaoduren
  • 2013年01月31日 17:35
  • 11741

解决position: fixed;不兼容IE7的问题,由于IE6不支持些属性,可以不管

在做项目的时候,为了固定头
  • dzyangxi
  • dzyangxi
  • 2014年09月12日 17:35
  • 450

css+div fixed属性定位在ie中不兼容的解决办法

解决了div+css定位时,ie不支持fixed属性的问题
  • dongluobing
  • dongluobing
  • 2011年05月04日 17:36
  • 1101

IE8 不支持 position:fixed 的简单解决办法

今天发现使用 position:fixed 的页面在firefox下没有问题,在IE8下却不能正常显示,在网上找了找,有不少相关文章,但是不是不起作用就是太复杂,后来终于发现一个简单的解决办法,就是在...
  • xuanjiewu
  • xuanjiewu
  • 2015年09月28日 17:01
  • 1273

浏览器兼容性问题解决方案之CSS——已在IE、FF、Chrome测试

在浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试和浏览器兼容性问题解决方法,已在IE、FF、Chrome测试中已经对浏览器中存在的CSS的兼容性和JS的兼容性进行了简单说明,现...
  • sunpeng1117
  • sunpeng1117
  • 2016年03月14日 09:44
  • 3731

ie8以下版本(包括ie8)的浏览器不支持html5标签属性解决方案(Modernizr 2.6.2插件的使用)

ie8以下版本(包括ie8)的浏览器不支持html5标签属性解决方案(Modernizr 2.6.2插件的使用)...
  • zyx13859002783
  • zyx13859002783
  • 2014年08月12日 09:30
  • 25957

ie8兼容性问题(六) 遮罩层(absolute,fixed)

带遮罩层的弹框的实现(absolute和fixed同理,以下代码用fixed举例) #container { position: fi...
  • qq_38627581
  • qq_38627581
  • 2017年09月20日 10:44
  • 382

低版本手机浏览器不支持position: fixed的解决方法

最近在网上接了单私活,做的是手机wap的,其中涉及到fixed
  • sasa9090
  • sasa9090
  • 2014年09月06日 08:53
  • 391
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:固定浮动窗positioin:fixed浏览器(IE6 IE7 IE8 IE9 Chrome Firfox)兼容性解决方案
举报原因:
原因补充:

(最多只允许输入30个字)