<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>花儿开了 &#187; position</title>
	<atom:link href="http://blog.istef.info/tag/position/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.istef.info</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Sun, 06 Jun 2010 05:52:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
	<atom:link rel='hub' href='http://blog.istef.info/?pushpress=hub'/>
		<item>
		<title>让 IE &lt; 7 支持 position:fixed 的通用方法</title>
		<link>http://blog.istef.info/2008/04/13/css-position-fixed-for-ie6/</link>
		<comments>http://blog.istef.info/2008/04/13/css-position-fixed-for-ie6/#comments</comments>
		<pubDate>Sun, 13 Apr 2008 07:13:09 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[fixed]]></category>
		<category><![CDATA[position]]></category>

		<guid isPermaLink="false">http://blog.istef.info/2008/04/13/css-position-fixed-for-ie6/</guid>
		<description><![CDATA[每个 Web Developer / Designer 都知道 CSS 的 position:fixed 的妙用。利用这个属性，我们可以轻松的将一个元素“固定”在页面的某个位置。这在我们做一些特殊的效果，例如页边角的小角旗，或是固定页面底下的脚注都是非常有用的。但是万恶的 IE 却对这个属性支持有问题，尽管 IE7/8 已经能够正确处理这个属性，但 IE6 的份额还是很高，所以当我们用这个属性时，还得想办法解决这个问题。 今天在一位德国朋友的博客上，看到了一个不错的通用解决方案。这里我简单介绍，或者说翻译一下作者的方法： 在 Firefox/Opera 等良好支持 W3C 标准的浏览器中，如果我们希望将某个元素固定在页面底部，我们可以给它指派这样的 CSS： position: fixed;bottom: 0; 对于 IE7 来说，它虽然可以正确的将这个元素 fix 在底部，但它却错误的处理了水平方向的位置。对于这个问题，我们可以利用一个原有的 hack 来解决： left: 50%;margin-left: -390px; 这里 margin-left 的值应该修改为您页面主要区域宽度的一半。这样 IE7 下基本也就完美了。剩下需要解决的就是 IE6, IE5.5 的问题了，他们不懂得 position: fixed 属性，所以我们需要单独解决一下： 首先我们为这些浏览器单独创建一个样式表，我们可以利用条件注释语句，让 IE&#60;7 的浏览器单独载入这个“多于”的样式表： &#60;!&#8211;[if IE lt 7]&#62;&#60;link rel=&#8221;stylesheet&#8221; [...]]]></description>
			<content:encoded><![CDATA[<p>每个 Web Developer / Designer 都知道 CSS 的 position:fixed 的妙用。利用这个属性，我们可以轻松的将一个元素“固定”在页面的某个位置。这在我们做一些特殊的效果，例如页边角的小角旗，或是固定页面底下的脚注都是非常有用的。但是万恶的 IE 却对这个属性支持有问题，尽管 IE7/8 已经能够正确处理这个属性，但 IE6 的份额还是很高，所以当我们用这个属性时，还得想办法解决这个问题。</p>
<p>今天在一位<a href="http://bassistance.de/2006/11/02/position-fixed-for-ie-7/">德国朋友的博客</a>上，看到了一个不错的通用解决方案。这里我简单介绍，或者说翻译一下作者的方法：</p>
<p>在 Firefox/Opera 等良好支持 W3C 标准的浏览器中，如果我们希望将某个元素固定在页面底部，我们可以给它指派这样的 CSS：</p>
<blockquote><p>position: fixed;<br />bottom: 0;</p>
</blockquote>
<p>对于 IE7 来说，它虽然可以正确的将这个元素 fix 在底部，但它却错误的处理了水平方向的位置。对于这个问题，我们可以利用一个原有的 hack 来解决：</p>
<blockquote><p>left: 50%;<br />margin-left: -390px;</p>
</blockquote>
<p>这里 margin-left 的值应该修改为您页面主要区域宽度的一半。这样 IE7 下基本也就完美了。剩下需要解决的就是 IE6, IE5.5 的问题了，他们不懂得 position: fixed 属性，所以我们需要单独解决一下：</p>
<p>首先我们为这些浏览器单独创建一个样式表，我们可以利用条件注释语句，让 IE&lt;7 的浏览器单独载入这个“多于”的样式表：</p>
<blockquote><p>&lt;!&#8211;[if IE lt 7]&gt;<br />&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;path/to/stylesheet/ie-stuff.css&#8221; type=&#8221;text/css&#8221; media=&#8221;screen&#8221; /&gt;<br />&lt;![endif]&#8211;&gt;</p>
</blockquote>
<p>然后我们在这个 CSS 文件中，对这个需要固定在页面底部的元素添加 CSS 属性：</p>
<blockquote><p>postion: absolute;<br />bottom: auto;<br />top: expression( eval(document.compatMode &amp;&amp; document.compatMode==&#8217;CSS1Compat&#8217;) ? documentElement.scrollTop + (documentElement.clientHeight &#8211; this.clientHeight) &#8211; 1 : document.body.scrollTop + (document.body.clientHeight &#8211; this.clientHeight) &#8211; 1);</p>
</blockquote>
<p>这里事实上就是利用了 IE 中特有的 CSS 运算符 expression。在 expression 中我们可以利用 Javascript 计算出需要的 top 值，这样就达到了与 position: fixed 同样的效果。</p>
<p>这种方法原理上来说和以前的 Javascript 方案是相同的，但这种方法显然通用性更好一点。当然，如果您不介意用 Javascript 的话，实现同样的效果会更直观更简单一点。</p>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2008%2F04%2F13%2Fcss-position-fixed-for-ie6%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2008%2F04%2F13%2Fcss-position-fixed-for-ie6%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2008/04/13/css-position-fixed-for-ie6/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using memcached
Page Caching using memcached
Database Caching 1/10 queries in 0.006 seconds using memcached
Object Caching 311/327 objects using memcached

Served from: blog.istef.info @ 2012-02-13 17:50:33 -->
