固定定位来源:http://www.wowbox.com.tw/blog/uploads/200705/02_022326_3.htm
详细HTML如下:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Position @随网之舞</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background:#242424;color:#ccc;}
h1{text-align:center;line-height:200%;}
code{display:block;margin:0.5em;border:1px solid #282828;padding:1em;background:#222;color:#888;font:1em Fixedsys;}
code span{color:#666;font-family:Verdana;}
ul{margin:1em;}
#fixed{position:fixed;top:5em;right:0;background:#fff;color:#000;}
</style>
<!--[if lt IE 7]>
<style type="text/css">
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<h1>Fixed Position</h1>
<pre><code>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<span>......</span>
<!--[if lt IE 7]>
<style type="text/css">
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<span>......</span>
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
</code></pre>
<ul>
<li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li>
</ul>
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
关键代码在于:
/* 这是针对标准浏览器的写法 */
#fixed{position:fixed;top:5em;right:0;background:#fff;color:#000;}
</style>
<!--[if lt IE 7] >
/* 这是版本小于ie7的兼容代码 */
<style type="text/css">
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
</style>
<![endif]-->
后来,在应用这个东东的时候,关键代码检查了N遍都是对的,但是IE6中死活不出正确的效果,继而最后由同事(对css是外行)发现原因出在xml版本的声明上面。。。郁闷了半天
<?xml version="1.0" encoding="utf-8"?>
这个东西在ie6中不写的话,完全没有效果,再次鄙视IE。
记录之以便后忘。
分享到:
相关推荐
IE6浏览器兼容问题总结及CSS排版注意地方 列举IE6中10个不得不注意的问题 重构你的代码
纯css下拉菜单兼容主流浏览器IE6+
div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf
浏览器兼容常见问题css兼容 css兼容 浏览器兼容 IE6789兼容
浏览器兼容CSS ,IE6.IE7,FF
纯CSS实现跨浏览器固定定位! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
兼容ie6、ie7、ie8、ie9、Chrome、Firefox等主流浏览器,轻量简洁容易上手使用,是web开发、学习的必备之选。
CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题
支持多种浏览器的纯CSS下拉菜单很好用 很强大
CSS Hack兼容大全,令网页能正常显示在IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器上
各种浏览器的兼容性和CSS HACK的写法,让你不再为IE6和各种浏览器的兼容性发愁,非常方便!
主要关于各个浏览器的兼容问题,主要针对IE6、IE7、IE8和Fixfox浏览器
CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...
css浏览器兼容问题内部资料 欢迎下载!实例研究!
CSS 对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了 一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS...
css渐变代码,代码兼容各个浏览器,适用于ie7以上及各主流浏览器
现在很多代码都不支持IE6 在IE6下面一片混乱 ...这个是我从整理的,可以自动判断IE6浏览器,并给予人性化的提示,不在那么生硬 使用这个代码非常方便 只需要把代码插入网页就好了 so easy 欢迎分享
模仿懒人图库二级导航,纯css二级导航 兼容ie6欢迎下载
CSS浏览器兼容问题,解决各个浏览器中css不兼容的问题。
一款取自国外某网站的纯CSS实现的始终固定在网页底部的