`
caiceclb
  • 浏览: 239550 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

浏览器视窗内纯CSS的层固定位置及发现的一个针对IE6的怪癖问题

阅读更多

固定定位来源: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>
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot; &quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;zh&quot; lang=&quot;zh&quot;&gt;
&lt;head&gt;
<span>......</span>
&lt;!--[if lt IE 7]&gt;
&lt;style type=&quot;text/css&quot;&gt;
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
&lt;/style&gt;
&lt;![endif]--&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;wrapper&quot;&gt;
<span>......</span>
&lt;/div&gt;
&lt;div id=&quot;fixed&quot;&gt;&lt;h2&gt;{position:fixed}&lt;/h2&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</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。

 

记录之以便后忘。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics