<?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; fix</title>
	<atom:link href="http://www.zui88.com/view-tag/fix/feed" rel="self" type="application/rss+xml" />
	<link>http://www.zui88.com/blog</link>
	<description>中山php&#124;最优网络</description>
	<lastBuildDate>Mon, 13 May 2013 04:56:43 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.4</generator>
		<item>
		<title>ie6实现div页面固定不动，纯CSS中使用expression兼容fix</title>
		<link>http://www.zui88.com/blog/view-392.html</link>
		<comments>http://www.zui88.com/blog/view-392.html#comments</comments>
		<pubDate>Wed, 01 Aug 2012 09:36:33 +0000</pubDate>
		<dc:creator>lin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[expression]]></category>
		<category><![CDATA[fix]]></category>

		<guid isPermaLink="false">http://www.zui88.com/blog/?p=392</guid>
		<description><![CDATA[* html,* html body /* IE6 Fixed Position Jitter Fix */{background-image:url(about:blank);background-attachment:fixed;} * html .fixed-top /* IE6 position fixed Top */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));} * html .fixed-right /* IE6 position fixed right */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)&#124;&#124;0)-(parseInt(this.currentStyle.marginRight,10)&#124;&#124;0));} * html .fixed-bottom /* IE6 position fixed Bottom */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)&#124;&#124;0)-(parseInt(this.currentStyle.marginBottom,10)&#124;&#124;0)));} * html .fixed-left /* IE6 position fixed Left */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));} CSS中使用expression有ie才能识别。IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和 Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript 表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 例子： 1.给元素固有属性赋值 下面是定义container容器的宽度，如果&#60;725就为自己的宽度，否则就等于725，相当于max-width:725px;。 　　&#60;style [...]]]></description>
			<content:encoded><![CDATA[<pre>* html,* html body /* IE6 Fixed Position Jitter Fix */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top /* IE6 position fixed Top */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 position fixed right */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 position fixed Bottom */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left /* IE6 position fixed Left */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

<strong>CSS中使用expression有ie才能识别。</strong>IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和
Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript
表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他<a href="http://baike.baidu.com/view/7718.htm" target="_blank">浏览器</a>对象。这个表达式就好像是在这个元素的一个成员函数中一样。
</pre>
<p><strong>例子：</strong> <strong>1.给元素固有属性赋值</strong> 下面是定义container容器的宽度，如果&lt;725就为自己的宽度，否则就等于725，相当于max-width:725px;。 　　&lt;style type="text/css" media="screen"&gt; 　　#container { width: expression((documentElement.clientWidth &gt; 725) ? "725px" : "auto" ); } 　　&lt;/style&gt; 　　<strong>2.给元素自定义属性赋值</strong> 例如，消除页面上的链接虚线框。 通常的做法是： 　　&lt;a href="link1.htm" onfocus="this.blur()"&gt;link1&lt;/a&gt; 　　&lt;a href="link2.htm" onfocus="this.blur()"&gt;link2&lt;/a&gt; 　　&lt;a href="link3.htm" onfocus="this.blur()"&gt;link3&lt;/a&gt; 　　粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？ 　　采用expression的做法如下： 　　&lt;style type="text/css"&gt; 　　a {star : expression(this.onFocus=this.blur());} 　　&lt;/style&gt; 　　&lt;a href="link1.htm"&gt;link1&lt;/a&gt; 　　&lt;a href="link2.htm"&gt;link2&lt;/a&gt; 　　&lt;a href="link3.htm"&gt;link3&lt;/a&gt; 　　<strong>说明：</strong>里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JS脚本， 在自定义属性与expression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非script内。OK，这样就很容易 地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移 进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为 　　&lt;style type="text/css"&gt; 　　input {star : expression(onmouseover=this.style.backgroundColor="#F5F5F5"; 　　onmouseout=this.style.backgroundColor="#FFFFFF")} 　　&lt;/style&gt; 　　&lt;input type="text"&gt; 　　&lt;input type="text"&gt; 　　&lt;input type="text"&gt; 　　可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示： 　　&lt;style type="text/css"&gt; 　　input {star : expression(onmouseover=function() 　　{this.style.backgroundColor="#FF0000"}, 　　onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) } 　　&lt;/style&gt; 　　&lt;input type="text"&gt; 　　&lt;input type="text"&gt; 　　&lt;input type="text"&gt; 　　<strong>注意:</strong>不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高。</p>
<pre>
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.zui88.com/blog/view-392.html/feed</wfw:commentRss>
		<slash:comments>437</slash:comments>
		</item>
	</channel>
</rss>
