[整理] 固定在屏幕一个地方的漂浮窗口 css fixed兼容IE6
具体代码：
<br/>position:fixed<br/>
再设置好上下左右的距离就ok了！
但是只因为这个ie6!
在一个前端的群里问一下哈，再次感谢热心的pr、牛头人酋长、王子哈！
他们给我建议
把html，body的height设置成100%，并且overflow:hidden
然后自己搞个容器，overflow:auto,替代原来的body
你需要定位的那个元素与这个容器平级，针对body定位
这样当用户滚动的时候滚的是你自己搞的那个容器，而body没有动
代码：
根据他们的建议，我做的演示：
http://www.xunzou.com/demo/fixed.htm
当然群里还有一个方法：
<br/><br/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br/><html xmlns="http://www.w3.org/1999/xhtml"><br/><head><br/><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br/><title>IE6 position:fixed bug</title><br/><style><br/>* {<br/> padding:0;<br/> margin:0;<br/>}<br/>#rightform {<br/> text-align:center;<br/> padding:50px;<br/> font:14px/22px Georgia, "Times New Roman", Times, serif;<br/> height:1200px;<br/> background:#ffc;<br/>}<br/>#rightform h1 {<br/> font-family:arial;<br/> background:#e8edef;<br/> height:300px;<br/> line-height:300px;<br/> margin-bottom:200px;<br/>}<br/>#rightform p {<br/> line-height:1.5em;<br/> background:#ffdfff;<br/> padding:90px 0;<br/>}<br/>#rightform form {<br/> background-color:#ddd;<br/> padding:10px 20px;<br/> border:1px solid #aaa;<br/> position:fixed;<br/> right:30px;<br/> top:120px;<br/>}<br/></style><br/><!--[if IE 6]><br/><style type="text/css"><br/> html{overflow:hidden;}<br/> body{height:100%;overflow:auto;}<br/> #rightform form{position:absolute;}<br/></style><br/><![endif]--><br/></head><br/><body><br/><div id="rightform"><br/> <h1><br/> <a href="" title="IE6 position:fixed bug" rel="bookmark">IE6 position:fixed bug</a><br/> </h2><br/> <p>position:fixed; vs position:absolute;<br /><br/> Created by <a href="#" title="sofish">sofish</a> from <a href="#" title="blog">幸福收藏夹</a></p><br/> <form id="g_search" method="get" action="#"><br/> <input id="g_s" name="g_s" type="text" value="" /><br/> <input id="g_submit" name="g_submit" type="button" value="search" /><br/> </form><br/></div><br/></body><br/></html><br/><br/>
0 条留言
我要留言