关闭

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

标签: ie浏览器chromexhtmlhtmlcss
11600人阅读 评论(1) 收藏 举报
分类:

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

先贴代码:

<!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]-->

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




   
1
3

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:466144次
    • 积分:5581
    • 等级:
    • 排名:第4886名
    • 原创:101篇
    • 转载:9篇
    • 译文:1篇
    • 评论:87条
    ★★纯css效果★★

    最新评论