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

最新推荐文章于 2024-07-28 00:35:14 发布

原创最新推荐文章于 2024-07-28 00:35:14 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #CSS #IE #XML #XHTML

XHTML CSS 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种解决IE6浏览器中fixed定位显示问题的方法。通过条件注释为IE6及以下版本提供特殊的CSS样式，确保fixed元素能够正确显示。

固定定位来源：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版本的声明上面。。。郁闷了半天