固定浮动窗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 javascript等兼容IE6,IE7,IE8,IE9,FIREFOX,Chrome等浏览器详细解决方法

整理了css javascript等兼容IE6,IE7,IE8,IE9,FIREFOX,Chrome等浏览器详细解决方法。 CSS部分 div类 1. 居中问题 div里的内容,IE默...

解决浏览器兼容问题hack,IE6/IE7/IE8/IE9/Firefox/Opera/Webkit/Chrome/Safari

color:red; color:red !important; _color:red; *color:red; +color:red; *+color:red; color:red\9; color...
  • shen516
  • shen516
  • 2014年06月06日 11:12
  • 2014

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法

1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-...

IE6,IE7,IE8,IE9,FIREFOX,Chrome等浏览器兼容详解收集

CSS部分 div类 1. 居中问题 div里的内容,IE默认为居中,而FF默认为左对齐 可以尝试增加代码margin:auto 2. 高度问题 两上下排列或嵌套的div,...

多图片上传+图片预览,兼容所有浏览器 IE5/IE6/IE7/IE8/IE9/Chrome/Safari/Firefox/Opera/

多图片上传+图片预览,兼容所有浏览器 IE5/IE6/IE7/IE8/IE9/Chrome/Safari/Firefox/Opera/ 本文提供了一种实现多文件上传的方法,如果是图片上传,则支持图片...

如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器

1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 tex...

IE5,IE5.5,IE6,IE7,IE8,IE9的css兼容性列表

At-rules CSS 2.1:   Internet Explorer 5 Internet Explorer 5.5 Internet Explorer 6 Intern...

IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

最近发现各大类库都能利用xxx.innerHTML=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTM...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:固定浮动窗positioin:fixed浏览器(IE6 IE7 IE8 IE9 Chrome Firfox)兼容性解决方案
举报原因:
原因补充:

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