<?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; IE</title>
	<atom:link href="http://www.ilovejs.net/archives/tag/ie/feed" rel="self" type="application/rss+xml" />
	<link>http://www.ilovejs.net</link>
	<description>到了创造为主的阶段，不忘继续学习</description>
	<lastBuildDate>Thu, 15 Dec 2011 06:18:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>IE6,IE7下设置透明度Opacity的Bug</title>
		<link>http://www.ilovejs.net/archives/178</link>
		<comments>http://www.ilovejs.net/archives/178#comments</comments>
		<pubDate>Wed, 06 Jan 2010 09:06:50 +0000</pubDate>
		<dc:creator>Supersha</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[Opacity]]></category>

		<guid isPermaLink="false">http://www.ilovejs.net/?p=178</guid>
		<description><![CDATA[今天在写一个跨浏览器的setOpacity设置HTML元素的透明度函数的时候，函数代码如下： [javascript] var setOpacity = function(elem, l){ if (elem.filters) { elem.style.filter =&#34;alpha(opacity=&#34;+l+&#34;)&#34;; } else { elem.style.opacity = l / 100; &#8230; <a href="http://www.ilovejs.net/archives/178" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p>今天在写一个跨浏览器的setOpacity设置HTML元素的透明度函数的时候，函数代码如下：<br />
[javascript]<br />
var setOpacity = function(elem, l){<br />
     if (elem.filters) {<br />
           elem.style.filter =&quot;alpha(opacity=&quot;+l+&quot;)&quot;;<br />
     } else {<br />
           elem.style.opacity = l / 100;<br />
     }<br />
}</p>
<p>//Example:<br />
onload=function(){<br />
     setOpacity(document.getElementById(&quot;div&quot;),20);<br />
}<br />
[/javascript]<br />
发现在IE6，IE7下总是没有效果，郁闷了一些时间，后来经过测试，无意中设置了元素的width和height样式，IE6，IE7出来效果了。惊奇了一下，之后又测试了只声明width或者只声明height的情况下，也有效果。现在发现问题了，可能是IE6、7下的Bug，也或者Microsoft有意这样设置。<br />问题找到了也就好对症下药了，可以按照这样的思路来解决这个问题：第一是根据需要在css里声明width或者height；第二是在Javascript里动态获取HTML元素潜在的width或者height，重新给它的width或者height赋值，这样就相当于“显示”声明了它的width或者height。下面是获取HTML元素潜在width和height的两个方法：<br />
[javascript]<br />
var Style = {<br />
	//获取HTML元素最终样式的辅助函数<br />
	getFinalStyle: function(elem, css){<br />
		if (window.getComputedStyle) { //W3C<br />
			return window.getComputedStyle(elem, null)[css];<br />
		} else if (elem.currentStyle) {  //IE<br />
			return elem.currentStyle[css];<br />
		} else {<br />
			return elem.style[css];<br />
		}<br />
	},<br />
	height: function(elem){<br />
		//首先检查HTML元素是否隐藏，因为display=&#8217;none&#8217;的元素是获取不到高度和宽度的<br />
		if (this.getFinalStyle(elem, &quot;display&quot;) !== &quot;none&quot;) {<br />
			return elem.offsetHeight || elem.clientHeight;<br />
		} else {<br />
			//获取隐藏掉的函数的高度，先让它显示，获取到高度之后再隐藏，下同<br />
			elem.style.display = &quot;block&quot;;<br />
			var h = elem.offsetHeight || elem.clientHeight;<br />
			elem.style.display = &quot;none&quot;;<br />
			return h;<br />
		}<br />
	},<br />
	width: function(elem){<br />
		if (this.getFinalStyle(elem, &quot;display&quot;) !== &quot;none&quot;) {<br />
			return elem.offsetWidth || elem.clientWidth;<br />
		} else {<br />
			elem.style.display = &quot;block&quot;;<br />
			var w = elem.offsetWidth || elem.clientWidth;<br />
			elem.style.display = &quot;none&quot;;<br />
			return w;<br />
		}<br />
	}<br />
}<br />
[/javascript]<br />
通过上面Style对象的height和width就可以获取任何HTML元素的height和width。这样就可以在IE下在给元素设置透明度之前，获得它的width和height并赋值给它的style.height或者style.width：<br />
[javascript]<br />
var setOpacity = function(elem, l){<br />
      if (elem.filters) {<br />
            //在IE下给elem的height重新赋值<br />
	elem.style.height=Style.height(elem,&quot;height&quot;)+&quot;px&quot;;<br />
             elem.style.filter =&quot;alpha(opacity=&quot;+l+&quot;)&quot;;<br />
      } else {<br />
             elem.style.opacity = l / 100;<br />
      }<br />
}<br />
[/javascript]<br />
利用上面修改过后的方法，在IE6，IE7下运行正常了，问题得到了解决。不过值得说明的是，这个问题在IE8版本中似乎得到了修正，没有显示声明width或者height也都可以设置透明度，这是件好事。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ilovejs.net/archives/178/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>IE的那些@cc_on</title>
		<link>http://www.ilovejs.net/archives/66</link>
		<comments>http://www.ilovejs.net/archives/66#comments</comments>
		<pubDate>Wed, 23 Dec 2009 16:49:18 +0000</pubDate>
		<dc:creator>Supersha</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[@cc_on]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://www.ilovejs.net/?p=66</guid>
		<description><![CDATA[最近在编写一个获取DOM元素在文档中的X/Y坐标的时候，遇到了一个ie6,ie7下多出2个像素的问题，临时想到了ie的那套@cc_on特定判断语法，网上狂搜关于这方面的代码，搜出来一大把。现在将它们总结整理如下： @_jscript_version是IE的版本号，/*@cc_on &#8230;&#8230; @*/就是IE专属的一个判断执行块，@_x86和@_x32 表示OS的位数。 [javascript] /*@cc_on @if (@_jscript_version &#60; 5.7) { //code for IE6 and lower } @else { &#8230; <a href="http://www.ilovejs.net/archives/66" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p>最近在编写一个获取DOM元素在文档中的X/Y坐标的时候，遇到了一个ie6,ie7下多出2个像素的问题，临时想到了ie的那套@cc_on特定判断语法，网上狂搜关于这方面的代码，搜出来一大把。现在将它们总结整理如下：
</p>
<p>
@_jscript_version是IE的版本号，/*@cc_on &#8230;&#8230; @*/就是IE专属的一个判断执行块，@_x86和@_x32 表示OS的位数。
</p>
<p>[javascript]<br />
 /*@cc_on<br />
     @if (@_jscript_version &lt; 5.7) {<br />
         //code for IE6 and lower<br />
     } @else {<br />
        //code for IE7 and upper<br />
     }<br />
    @end<br />
@*/</p>
<p>////////////////////////////////////////////</p>
<p>/*@cc_on<br />
    @if (@_jscript_version &gt; 5.7)<br />
         document.write(&quot;You are using IE8+&quot;);</p>
<p>    @elif (@_jscript_version == 5.7 &amp;&amp; window.XMLHttpRequest)<br />
         document.write(&quot;You are using IE7&quot;);</p>
<p>    if (@_jscript_version==5.6 ||(@_jscript_version==5.7 &amp;&amp; navigator.userAgent.toLowerCase().indexOf(&quot;msie 6.&quot;) != -1))<br />
         document.write(&quot;You are using IE6&quot;);</p>
<p>    @elif (@_jscript_version == 5.5)<br />
    document.write(&quot;You are using IE5.5&quot;);</p>
<p>    @else<br />
    document.write(&quot;You are using IE5 or older&quot;);<br />
    @end<br />
@*/</p>
<p>//////////////////////////////////////////////////////////</p>
<p>/*@cc_on<br />
   @if (@_jscript_version &gt;= 5)<br />
      document.write(&quot;IE Browser that supports JScript 5+&quot;);<br />
   @elif (@_jscript_version &gt;= 4)<br />
      document.write(&quot;IE Browser that supports JScript 4+&quot;);<br />
   @else<br />
      document.write(&quot;Very old IE Browser&quot;);<br />
   @end<br />
@*/<br />
[/javascript]<br />
通过上面的@cc_on，你可以针对目前IE的各版本来编写js脚本，但是还是那句话：可以不用的就别用吧，它也确实是有些丑陋。:)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ilovejs.net/archives/66/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

