<?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>Moondy’s Zone</title>
	<atom:link href="http://www.moondyzone.com/feed" rel="self" type="application/rss+xml" />
	<link>http://www.moondyzone.com</link>
	<description>一位IT民工的点点滴滴……  WEB前端、网页重构、AS3</description>
	<lastBuildDate>Mon, 18 Apr 2011 10:06:33 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type='text/javascript' src='http://www.moondyzone.com/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
	<item>
		<title>页面复制的完美解决方案</title>
		<link>http://www.moondyzone.com/css/610.html</link>
		<comments>http://www.moondyzone.com/css/610.html#comments</comments>
		<pubDate>Sun, 17 Apr 2011 09:25:14 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[JS/Ajax]]></category>
		<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[兼容]]></category>
		<category><![CDATA[复制]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=610</guid>
		<description><![CDATA[之前有发过一篇有关兼容浏览器页面复制的文章，很早就有朋友反应说在某些情况下无效，当时却还没有怎么注意，后来自己要用的时候发现的确是有问题，查了一下原因，原来是FLASH版本的问题。现在的浏览器中FLASH版本基本上都升到10了，在FLASH10中，要有实际的点击动作才能触发复制，所以原来那个是就无效了。
当然，解决办法还是有的，在这里介绍一个：zeroclipboard。同样也是利用FLASH来实现的，所以浏览器的兼容性是没有问题的。
另外，现在很多项目都会用到jquery，用的时候需要注意，尽可能用$(window).load()，因为如果用$(document).ready()的话会有可能在还没被加载的情况下就运行了，会复制失效。对于用jquery框架的朋友，这里推荐一个专门针对jquery的版本：zClip。
相关文章兼容浏览器的页面复制代码解决IE8的兼容问题，X-UA-Compatible meta标签全兼容的标准三级菜单兼容浏览器的DIV最小高度自适应CSS实现兼容浏览器的文字阴影效果兼容各浏览器的FLASH透明方法]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/610.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>公司圣诞晚会，阿信的演唱视频</title>
		<link>http://www.moondyzone.com/diary/607.html</link>
		<comments>http://www.moondyzone.com/diary/607.html#comments</comments>
		<pubDate>Sat, 18 Dec 2010 10:38:34 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[我的日志]]></category>
		<category><![CDATA[日志]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=607</guid>
		<description><![CDATA[公司圣诞晚会已经结束了，依然是什么奖都没有中到。个人感觉总体上不如去年的节目好看，太多拼凑的歌舞剧，又也许是我不懂欣赏吧……。
相片是拍了不少，但由于座位不好，拍的全是屁股，就不发了。最后出场的嘉宾阿信（不是五月天那个，是原信乐团的主唱）还算比较给力，用破相机录了下视频，效果还凑和，放上来看一下。
《死了都要爱》


	var s1 = new SWFObject("http://www.moondyzone.com/wp-content/uploads/flvplayer.swf","single","352","288","7");
	s1.addParam("allowfullscreen","true");
	s1.addVariable("file","http://www.moondyzone.com/wp-content/uploads/2010/12/ax01.flv");
	s1.addVariable("width","352");
	s1.addVariable("height","288");
	s1.write("player1");

《海阔天空》


	var s1 = new SWFObject("http://www.moondyzone.com/wp-content/uploads/flvplayer.swf","single","352","288","7");
	s1.addParam("allowfullscreen","true");
	s1.addVariable("file","http://www.moondyzone.com/wp-content/uploads/2010/12/ax02.flv");
	s1.addVariable("width","352");
	s1.addVariable("height","288");
	s1.write("player2");

相关文章搬进腾讯大厦了，我也来晒一晒图~~临时通知：流量告急超可爱小表妹个唱表演，第一季辞旧迎新赋——殇吾手机今天起床打开QQ，收到朋友一条信息……开博第一篇，我该写什么？]]></description>
		<wfw:commentRss>http://www.moondyzone.com/diary/607.html/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>CSS3测试之——QQ企鹅</title>
		<link>http://www.moondyzone.com/css/599.html</link>
		<comments>http://www.moondyzone.com/css/599.html#comments</comments>
		<pubDate>Tue, 20 Jul 2010 09:03:40 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[CSS3]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=599</guid>
		<description><![CDATA[自从HTML5还有CSS3草案公布以来，国内兴起了一股学习的热潮，再包括JS2，这些都是未来WEB前端所发展的方向。做为一个WEB前端人员，必需要时刻关注前沿知识，不然等待的只有淘汰。不过，就我在公司接触的一些项目的统计来看，IE6还是浏览器占有率的大头，超过半数。所以，想迎来全面支持html5/css3的时代，恐怕还是有点遥远。
言归正传，当前关于CSS3，有个挺有名的机器猫测试页面，说测的是不同浏览器对CSS3的支持情况。本民工找来研究了一下，实很大噱头在里面，不知是有意还是无意，造成了在IE各版本下表现不一的状况，好像有点故意打压IE的嫌疑，虽然我也不喜欢IE。其实总的说来，要么就是支持，要么就是不支持，其实FF以及其它webkit内核的浏览器当前也不是真正支持CSS3，而是用各自的私有属性来支持而已。
不过看完之后，突发其想，想画一个QQ企鹅。说干就干，花了半天的时间，我承认也有参考下机器猫的代码，但是这只企鹅在不同浏览器下没有那么多的形态，只有支持与不支持两种。如下：

IE9以下的IE版本，会是左边那种情况；FF以及webkit内核的浏览器会是右边那种情况（opera下没有肚皮上的阴影），当然，版本不要太低。
虽然也没多少技术含量，但原创也辛苦。欢迎朋友们转载，但请标明出处。谢谢！


&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;title&#62;CSS3 QQ企鹅&#60;/title&#62;
&#60;!--by moondy  16955732--&#62;
&#60;style&#62;
body {margin:0; padding:0; background:#FFF;}
#qq {position:absolute; margin:50px 30%; width:500px;}
#face{
	position:relative;
	z-index:100;
	width:260px;
	height:200px;
	border-radius:400px 400px 280px 280px;
		-webkit-border-radius:400px 400px 280px 280px;
		-moz-border-radius:400px 400px 280px 280px;
	background:#000;
	background: -webkit-gradient(linear, right top, left bottom, from(#999) ,color-stop(0.20, #333), color-stop(0.73, #000),color-stop(0.95, #000), to(#000));
	background: -moz-linear-gradient(right top, #999,#333 20%, #000 73% ,#000 95% ,#000 155%);
	top:-15px;
}
#eyes{
	position:relative;
	top:-5px;
}
div.eye{
	position:absolute;
	border-radius: [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/599.html/feed</wfw:commentRss>
		<slash:comments>32</slash:comments>
		</item>
		<item>
		<title>关于图片缩放失真的解决方法</title>
		<link>http://www.moondyzone.com/css/595.html</link>
		<comments>http://www.moondyzone.com/css/595.html#comments</comments>
		<pubDate>Tue, 04 May 2010 08:49:09 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[VML]]></category>
		<category><![CDATA[图片缩放]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=595</guid>
		<description><![CDATA[首先先赞一下咱的设计师，微调了一下一点点的失真都被她发现了。
其实做前端应该经常会碰到这个问题，对图片的缩放会产生失真，主要是体现在IE上了，图片会出现锯齿。在FF、chorme等浏览器上不存在问题，天生就可以对缩放的图片进行柔化。对于这个问题，有人提出过用 -ms-interpolation-mode: bicubic;  来解决，不过这是IE7的私有属性，对于当前仍然占大头的IE6还是不能撒手不管呀。
解决的方法就是：VML。VML是一种基于XML的语言，可能有些朋友会觉得很陌生，其实当你从WORD里复制一段内容直接粘贴到HTML里的话，发现多出来的那一些所谓的WORD的样式，那就是VML。VML的全称是The Vector Markup Language(矢量可标记语言)，从这个名字我们就能理解为什么它可以处理图片缩放失真的问题了。哎，在这里也不说太多了，其实本民工也不太熟，临时了解的一些而已了，嘿嘿。
VML是IE only的，不过刚才也说过了，在FF、chorme等浏览器上是没有这个问题的（另，IE8中也已经解决这个问题），也就是说解决了IE也就解决了这个问题了。我还是直接帖DEMO吧，我也是现学现卖了，对VML有兴趣的同学可以到这里看看 http://www.infowe.com/vml/


&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;
&#60;html xmlns:v=&#34;urn:schemas-microsoft-com:vml&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;style&#62;
img {width:300px; height:300px; -ms-interpolation-mode: bicubic;}
v\:image{behavior: url(#default#VML);width:300px; height:300px; display:inline-block;}
&#60;/style&#62;
&#60;title&#62;全兼容解决图片缩放失真&#60;/title&#62;
&#60;/head&#62;
&#60;body&#62;
&#60;img src=&#34;http://www.moondyzone.com/wp-content/uploads/2010/05/qq.gif&#34; /&#62;
&#60;v:image src= &#34;http://www.moondyzone.com/wp-content/uploads/2010/05/qq.gif&#34;&#62;&#60;/v:image&#62;
&#60;/body&#62;
&#60;/html&#62;

  提示：你可以先修改部分代码再运行。

在这里还得说下，用IE打开的话，会看到两个图片的对比，而非IE的因为不支持VML所以只能看到一个图。而在实际应用中，应该通过后台程序判断当前的浏览器，然后选择是输出img还是v:image。
最后再说下，在不是很有必要的情况下，我觉得还是保证图片的原尺寸比较好，因为缩放的还是不及原尺寸的清晰。
暂时没有相关文章！页面复制的完美解决方案兼容浏览器的DIV最小高度自适应DIV+CSS布局中常用的列表元素（ul ol li dl dt dd）详解AS3+ASP+ACCESS的FLASH留言版教程（二）最近在研究PV3D了——360度全景图迷你且高效的WEB编辑器——xheditor]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/595.html/feed</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>一个挺酷的星级投票效果</title>
		<link>http://www.moondyzone.com/js/586.html</link>
		<comments>http://www.moondyzone.com/js/586.html#comments</comments>
		<pubDate>Tue, 09 Feb 2010 09:01:46 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[JS/Ajax]]></category>
		<category><![CDATA[投票]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=586</guid>
		<description><![CDATA[先声明一下，这是本人在某个项目中用到的，本人自己写的，如有雷同纯属巧合。同时也欢迎高人指正。
这种星级的投票效果很常见，但是目前线上大多都是通过多张背景图切换来实现的，比如下面这种

感觉这种方法挺麻烦的，而且也不能精确地表示比如8.8这样的小数，所以自己写了个，感觉还挺不错，不多说了，先上代码：


&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;IE=EmulateIE7&#34; /&#62;
&#60;title&#62;vote&#60;/title&#62;
&#60;script type=&#34;text/javascript&#34; src=&#34;http://www.moondyzone.com/wp-demo/jquery-lightbox/js/jquery.js&#34;&#62;&#60;/script&#62;
&#60;style&#62;
.user_rate {font-size:14px; position:relative; padding:10px 0;}
	.user_rate p {margin:0; padding:0; display:inline; height:40px; overflow:hidden; position:absolute; top:0; left:100px; margin-left:140px;}
	.user_rate p span.s {font-size:36px; line-height:36px; float:left; font-weight:bold; color:#DD5400;}
	.user_rate p span.g {font-size:22px; display:block; float:left; color:#DD5400;}
/*rating*/
.big_rate_bak {width:140px; height:28px; overflow:hidden; text-align:left; position:absolute; top:3px; left:85px; display:inline-block; background:url(http://www.moondyzone.com/wp-content/uploads/2010/02/b_star.gif) left [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/js/586.html/feed</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>兼容浏览器的页面复制代码</title>
		<link>http://www.moondyzone.com/js/574.html</link>
		<comments>http://www.moondyzone.com/js/574.html#comments</comments>
		<pubDate>Fri, 01 Jan 2010 14:56:33 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[JS/Ajax]]></category>
		<category><![CDATA[兼容]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=574</guid>
		<description><![CDATA[关于此方法复制不成功的，请看这一篇：http://www.moondyzone.com/css/610.html 
关于这个问题，目前网上大部分的代码都是只兼容IE的。因为之前实现这个功能都是用到了一个IE的控件。但前不久做一个任务的时候也碰到了这个需求，但是要全兼容，所以就找了一下，现在有了一种新的办法来解决这个问题，是通过一个FLASH来解决的。
原理其实很简单，是利用了AS3中的 System.setClipboard() 方法，因为是通过FLASH实现的，所以没有浏览器上的兼容性问题，用法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;title&#62;无标题文档&#60;/title&#62;
&#60;SCRIPT type=text/javascript&#62;
 function copy(meintext) {
  if (window.clipboardData) {
      window.clipboardData.setData(&#34;Text&#34;, meintext)
  } else {
 var flashcopier = 'flashcopier';
 if(!document.getElementById(flashcopier)) {
        var divholder = document.createElement('div');
  divholder.id = [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/js/574.html/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>斜角导航及滑动门的延伸</title>
		<link>http://www.moondyzone.com/css/562.html</link>
		<comments>http://www.moondyzone.com/css/562.html#comments</comments>
		<pubDate>Sun, 15 Nov 2009 12:02:21 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[斜角导航]]></category>
		<category><![CDATA[滑动门]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=562</guid>
		<description><![CDATA[下面的这两个例子都跟滑动门有关，应该都算滑动门的延伸。
之前有在BI上看到有朋友发过斜角导航，觉得可以有更好的解决方案。但最近都很忙，两个月没有来更新内容了，今天抽了点时间写了个DEMO发上来，自己写的，如果跟哪位高人有雷同的话那纯属巧合咯。也不说太多了，直接发例子了，方法很简单，一看就明白的。有一点要注意了，图片的透明部分需要花点时间来处理了。


&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;title&#62;无标题文档&#60;/title&#62;
&#60;style&#62;
ul {margin:0; padding:0;}
li {list-style-type:none;}
.nav {height:45px; font-size:14px; font-weight:bold;}
	.nav a {color:#333; text-decoration:none; display:inline-block; height:45px; line-height:45px; float:left; padding:0 30px 0 60px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/11/bak.png) left top no-repeat; position:relative;}
	.nav a span {display:block; height:45px; width:30px; position:absolute; top:0; right:-30px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/11/bak.png) right top no-repeat;}
	.nav a:hover {color:#FFF; text-decoration:none; background:url(http://www.moondyzone.com/wp-content/uploads/2009/11/bak.png) left bottom no-repeat;}
	.nav a:hover [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/562.html/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>搬进腾讯大厦了，我也来晒一晒图~~</title>
		<link>http://www.moondyzone.com/diary/536.html</link>
		<comments>http://www.moondyzone.com/diary/536.html#comments</comments>
		<pubDate>Fri, 11 Sep 2009 16:06:48 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[我的日志]]></category>
		<category><![CDATA[日志]]></category>
		<category><![CDATA[腾讯大厦]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=536</guid>
		<description><![CDATA[哎，许久没运动，搬的那一天被抓去当苦力，到现在还有点肌肉酸痛呢。本人较为内敛，只是随手拿手机拍了些相片，也来晒一下了。

从底部看，好高哇！一共39层，据说有139米。老实说，我的第一感觉竟然是联想到了某款曾经用过的剃须刀-_-!

大厅里有个很大的螺旋梯，不过我还没走上去看过是什么样子。

这里是茶水间，看起来有点像吧台呢。

这里是会客区，挺休闲的，平时也可以来这里坐一坐。

办公区一角。其实我挺喜欢这面墙的！

在食堂吃的第一顿午餐，一般说来10元左右。虽然不算便宜，但相对来说也挺丰盛的，尚能接受。

食堂北区的视野不错，可以向外眺望。

每人的办公桌上都有一盆植物，说是要自己照顾，不知我会不会把它给养死了。

接下来是传说中团购价价值一千多元的办公椅，一定得给个特写先。坐起来的确挺舒服的，可以多方位地调节，还可以后仰比较大的角度，中午休息时躺着挺不错的。只是这个价格……

也不知这叫什么区了，挺休闲的，还有电视跟DVD。

还有高尔夫球哦！

随手拍的一张了，好像不怎么有感觉。

最后来一张露脸的吧！哎，桌上的Q哥Q妹好像都不理我。

相关文章公司圣诞晚会，阿信的演唱视频临时通知：流量告急超可爱小表妹个唱表演，第一季辞旧迎新赋——殇吾手机今天起床打开QQ，收到朋友一条信息……开博第一篇，我该写什么？]]></description>
		<wfw:commentRss>http://www.moondyzone.com/diary/536.html/feed</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
		<item>
		<title>使用动态scritp标签解决跨域读数据的问题</title>
		<link>http://www.moondyzone.com/js/532.html</link>
		<comments>http://www.moondyzone.com/js/532.html#comments</comments>
		<pubDate>Fri, 04 Sep 2009 07:43:48 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[JS/Ajax]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[跨域]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=532</guid>
		<description><![CDATA[来到TX后第一个比较正式的任务就是做一个活动页面。页面就不说了，活动页面嘛，那个线条啊只能大块大块地切图了。然后就是因为数据量并不多，所以采用了用静态页然后通过JS去读数据的做法。然后就碰到了跨域的问题了。
我想肯定有很多朋友也会碰到这样的情况，对方只给出一个链接让你去取数据，通过传递不同的参数，返回不同的数据。如果是在本域的话，用AJAX是很方便的，但AJAX不能跨域。而iframe的方法也不实用，只能跨小域，还需要在双方页面加相应的函数，页面里多了那么一块也让人感觉不舒服。所以决定用动态script标签的方法来解决这个问题。
在这里想说一句，国内的业内环境真是…，网上查出来的技术文章几乎都是同样的几篇转来转去，而且也说得不清不楚的很费解。还是BI上环境好些，呵呵。下面的代码并非我原创，也是参考来的，但我一定讲解清楚，让每一个看这文章的人都能明白具体是如何实现的。
由于浏览器安全的问题，一些跨域的请求都会被拒绝，当然，你也可以设置为添加到信任站点就能访问，但你不可能要求你的每个用户都去这样添加。但是，也有个例外，JS是可以跨域的，比如说我们用jquery的时候，可以加载code.google.com里面的jquery包，同样也能应用到jquery的框架；再比如说一些流量统计的代码，都是加一段JS在页面，我们就能应用到写在里面的函数了。所以，当我们把我们所以跨域读取的地址写在script标签的src里的时候，不管是什么后缀名的文件，都会被当做一个JS来读取。所以呢，这个页面的输出要采用JS的格式。
在这里先说两点，第一是这个方法名字虽然是叫动态script标签，但是你静态地直接写在页面里也是可以的，前提是你不需要动态地传递参数；第二是在很多文章里会把此方法跟json扯上关系，其实这跟json没有任何关系，只是因为用json来处理某些返回值时比较方便罢了。下面还是用json格式的来说明好了，因为这样的应用可能会比较多一点。
首先我们新建一个页面，可以是ASP、PHP或者CGI，或者TXT也都可以，但是让他的输出像这样：

var MyJSON = &#123;
   'info': &#91;&#123;'name' : 'moondy','sex' : '男','age' : '28'&#125;&#93;
&#125;;

这里定义了一个json，你也可以这样定义：

var name=&#34;moondy&#34;;
var sex=&#34;男&#34;;
var age=&#34;28&#34;;

喜欢怎样写就怎样写了，只是在有多组数据的时候，用json比较方便了。关键是要用var ，这样才能当做一个JS的变量来读取，此方法的主要思想，就是在你的页面动态地加入了一句变量的定义，而你就可以直接在JS中引用这个变量了。下面是JS部分：

var element = document.createElement&#40;&#34;script&#34;&#41;;
function createScript&#40;compId,dataId&#41;&#123;        
        element.src = &#34;http://www.moondyzone.com/json.php&#34;;//这里是你需要跨域读取的URL
        element.type = &#34;text/javascript&#34;;
      [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/js/532.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>a:hover在IE6中的BUG</title>
		<link>http://www.moondyzone.com/css/529.html</link>
		<comments>http://www.moondyzone.com/css/529.html#comments</comments>
		<pubDate>Sun, 16 Aug 2009 08:30:28 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[bug]]></category>
		<category><![CDATA[IE6]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=529</guid>
		<description><![CDATA[哎，最近工作太忙，都好久没来写点东西了。
这也是最近工作中碰到的一个问题，其实以前也经常碰到过。具体是这样的，有一个图片链接，为了有明显一些的提示效果，需要在鼠标移上去的时候把它放大。按思路来说，其实是很容易的，只要在a:hover img{}里定义鼠标经过时改变图片的大小就可以了。但实际上，在IE6中，a:hover img{}里定义的内容并不生效。
IE6对伪类的支持真的很烂，除了A标签外其它标签都不支持:hover伪类，而偏偏这个唯一支持的a:hover也还有着BUG。解决的方法就是给a:hover {}定义一个属性：

a:hover &#123;zoom:1;&#125;/*这里可以换成其他很多的属性。*/
a:hover img &#123;……&#125;

在网上找出的答案基本上都是这样，的确这样能解决问题，但却都没有说这个BUG到底是为什么。最初我是以为是要触发layout，但经过试验，不能触发layout的属性也能生效，比如说color、border之类的。也就是这一次，我才找到此BUG的原因所在：当a:hover {}的属性跟a {}中的是一样的时候，也就是说a:hover没有发生属性的改变，完全继承a的属性的时候，就会产生此BUG。所以给a:hover {}定义一个属性值就能解决这个问题，至于定义什么值就看具体情况了，至少可以不用zoom这个看起来有hack嫌疑的属性咯。
相关文章IE6中select挡住DIV的BUGIE6中出现重复字符的BUGCSS3测试之——QQ企鹅斜角导航及滑动门的延伸对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/529.html/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>迷你且高效的WEB编辑器——xheditor</title>
		<link>http://www.moondyzone.com/js/522.html</link>
		<comments>http://www.moondyzone.com/js/522.html#comments</comments>
		<pubDate>Thu, 30 Jul 2009 10:28:59 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[JS/Ajax]]></category>
		<category><![CDATA[juqery]]></category>
		<category><![CDATA[xheditor]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=522</guid>
		<description><![CDATA[很久很久以前，我刚接触到这一行的时候，用的是一款名叫webedit的WEB在线编辑器。当时并不了解什么WEB标准，后来才发现在非IE的浏览器下都用不了。其实抛开兼容性的话，这一款还算是蛮不错的在线编辑器了。
再后来，就用到了所谓大名鼎鼎的FCK。FCK功能的确是不错，但我实在没法称赞它好用，他真的很难用，或者说是不适合中国人的使用习惯吧。像我们一些开发人员自己用还没什么，如果给客户做的程序用的是FCK，那么一个上传图片的模式就会搞得人摸不着头脑。
然后我不停地在找，终于碰到了一款近乎完美的WEB在线编辑器——xheditor。没有说它完美，因为它还有一个前提条件，是用jquery框架开发的。不过就算项目用的不是jquery框架，加上一个50K的JS包，它的体积还是非常小的，调用相当方便不像以前的那些需要插入一个iframe而是一个textarea就可以了，而且非常适合国人的使用习惯。详细介绍我这里就不写了，大家可以去谷歌代码上去看，他们的开发团队一直都有更新版本。
http://code.google.com/p/xheditor/

相关文章一个挺酷的星级投票效果使用动态scritp标签解决跨域读数据的问题JQuery LightBox Plugin]]></description>
		<wfw:commentRss>http://www.moondyzone.com/js/522.html/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>对CSS渲染效率的一些研究</title>
		<link>http://www.moondyzone.com/css/517.html</link>
		<comments>http://www.moondyzone.com/css/517.html#comments</comments>
		<pubDate>Tue, 21 Jul 2009 09:30:45 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[效率]]></category>
		<category><![CDATA[渲染]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=517</guid>
		<description><![CDATA[其实在平时很少注意到CSS渲染效率的问题，不过在很多时候都是细节决定成败，这也是个不容忽视的问题。之前也拜读过网上流传的一篇有关CSS渲染效率的文章，传得太多，也不知原作是谁了。不过并不是太赞同其中的一些观点，所以就本人工作中的一些经验以及看法，说说这个问题，个人观点并非权威，欢迎拍砖。
在这里我们不只是单纯地研究渲染效率的快或慢，应该从一个项目的整体来看。页面渲染的这个过程，是在用户本地进行的，也就是说用户打开页面，载入了HTML代码以及样式表、JS等等相关的文件，浏览器再跟据这些文件把页面渲染出来。关于速度方面，我们更注重的是载入的速度。而渲染速度，的确某些样式的写法会存在渲染速度的差异，但对于当前随便每秒都能运算上亿次的个人电脑来说，把一张背景图平铺100次跟平铺10000次又有多大区别呢？当然，细节，细节决定成败，但细节不等于吹毛求疵，下面说说个人对此侧重点的一些看法。
可能会有影响，但可跟据具体情况忽略的部分
比如说颜色值，color:#F00;、color:#FF0000;、color:red; 这三者都是一样的，至少用人类的感观无法区分其对渲染速度的影响，用简写可能或多或少能减少那么几个字节的体积，不过标准写法是6位大写字符的写法。
display与visibility就不详说了，这本身就是两种不同的表现属性，该用谁就用谁。
注意某些样式的保留属性，比如说：
background:url(image.jpg);这样一句，那么在渲染的时候会默认输出background-color : transparent 、background-attachment : scroll 、background-repeat : repeat 等等属性。在完美主义者的眼里这是对资源的一种浪费，但同样，人类的感观体会不到此影响。其实个人还是认为简写形式有助于减少样式表的体积，而且这也似乎是行内默认的写法了。同样的，border、list-style等也有默认属性，也不用深究了。
背景平铺的问题
对于可平铺的背景来说，很多人喜欢用1px为单位来进行平铺，前面也说了，其实平铺多少次对于个人电脑来说几乎都是一样的，关键在于图片的大小了。对于可平铺的图片，一定范围内的像素值是一样的，所以增大尺寸对于积体的影响并不大，我这里对比了单色1*1跟10*10的图片在jpg跟gif格式下的大小，相差都几有几个字节

其实本人不太建议用1px的图，至少自己在修改的时候无法一眼看出那张图片是什么。而且现在用css sprites也会把可平铺的部分也做进去，这也是对渲染效率的提升了。
再说说会有明显影响的部分
@import 的使用
不建议在页面里使用，他会在页面加载完之后才被加载，有可能使页面闪动或是裸体。如果是样式表过多为了方面管理的话，放在CSS里就好。
某些选择符的使用
渲染的过程也就是对这些选择符的匹配，所以我们可以很容易地理解到，一些比较直接的选择符比如类选择符、ID选择符等的匹配效率高，而一些条件比较繁复点的选择符比如子选择符、属性选择符等的匹配效率相对来就低一些。当所匹配的量比较多的时候，可以明显地感觉到速度的差别。（关于各种选择符，具体可查看CSS手册了）
IE的滤镜
自从标准化的兴起以来，IE滤镜的日子就不好过了，除了不兼容以外，某些滤镜真的蛮耗资源的。现在还在用的可能就是为了处理IE6下图片透明的问题了，建议能不用就不用他吧。
expression的使用
也许这个不能归为渲染的部分，不过他的确相当占资源，如果加得多的话，会让你的页面其慢如牛。
相关文章CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG解决IE8的兼容问题，X-UA-Compatible meta标签一道看似简单的面试题全兼容的标准三级菜单]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/517.html/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>JQuery LightBox Plugin</title>
		<link>http://www.moondyzone.com/js/502.html</link>
		<comments>http://www.moondyzone.com/js/502.html#comments</comments>
		<pubDate>Mon, 13 Jul 2009 07:20:00 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[JS/Ajax]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[lightbox]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=502</guid>
		<description><![CDATA[说到lightbox，做这行的人应该都不陌生，想当年那牛逼哄哄的效果着实让我眼前一亮。不过原版的lightbox是用Prototype框架写的，但本民工只懂得少许的jquery，总不能同一个项目中用两个框架吧，还好牛人们已经做出了基于jquery的lightbox的插件了。其实wordpress里就有很多lightbox的插件，不过这东西可不是只用在博客里，还是整理一个能通用的吧。
jQuery lightBox 0.5,是当前最新的版本了，在这里本民工稍微修改了一下，去掉了点击时的虚线框，以及修改了有关中文的样式。
    
    
    $(function() {
        $('#gallery a').lightBox();
    });
    

	#gallery {padding: 10px;width: 520px;}
	#gallery ul { list-style: none;overflow:hidden; }
	#gallery ul li { display: inline;float:left; }
	#gallery ul img {
		border: 5px solid #F2F2F2;
		border-width: 5px 5px [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/js/502.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>解决IE中FLASH链接区域鼠标闪动的问题</title>
		<link>http://www.moondyzone.com/as3/498.html</link>
		<comments>http://www.moondyzone.com/as3/498.html#comments</comments>
		<pubDate>Mon, 06 Jul 2009 02:48:17 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Flash/AS3]]></category>
		<category><![CDATA[flash链接]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=498</guid>
		<description><![CDATA[不知有没有朋友碰到过这个问题，我也是前阵子做一个FLASH的时候才碰到这个问题。鼠标指向FLASH中的链接区域时，鼠标不是固定的手形，而是在手形跟指针之间不停地变换。这并不是点击区域的问题，因为单独打开FLASH是好的，在FF中也是好的，只是在IE中会出现此问题。
然后查阅资料，找到了解决方法，在FLASH的属性参数中加上以下两句中任意一句都可以解决

&#60;param name=&#34;wmode&#34; value=&#34;opaque&#34;&#62;
&#60;param name=&#34;wmode&#34; value=&#34;transparent&#34;&#62;

因为在DW里插入FLASH时默认是没有这两句的，另外现在很多都会用类似AC_FL_RunContent的JS加载FLASH，也要记得在相应位置加参数。
暂时没有相关文章！公司圣诞晚会，阿信的演唱视频一组超酷的AS3音频频谱波形网站优化——Yslow评分标准临时通知：流量告急a:hover在IE6中的BUG一个挺酷的星级投票效果]]></description>
		<wfw:commentRss>http://www.moondyzone.com/as3/498.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>新版本Yslow 22项评分标准</title>
		<link>http://www.moondyzone.com/css/481.html</link>
		<comments>http://www.moondyzone.com/css/481.html#comments</comments>
		<pubDate>Fri, 26 Jun 2009 08:24:23 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[yslow]]></category>
		<category><![CDATA[优化]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=481</guid>
		<description><![CDATA[对于一个WEB前端工作者来说，Yslow绝对是一款必不可少的性能优化工具，可以方便地查出是哪些因素影响了你的网页性能。

新版本的Yslow共有22条指标，比原来的多了9条。还可以自定义规则，新版本Yslow有三个内置的规则：V2、V1、小型站和博客，V2的指标最多，包括所有22项指标，而V1则只包括上一个版本的13条指标。你可以完全设置自己的规则，这样就可以比较灵活，也更客观实际的分析自己的网站。另外，还增加了一些网站的优化工具，比如Smush.it、JS Minified、 JS Beautified等等。
在这里我只列举一下新增的那9条指标了，其它的可以看另一篇网站优化——Yslow评分标准。由于是本人自行翻译的，如有错漏还请达人指出。
Make AJAX cacheable
设置AJAX的缓存。当前AJAX的应用越来越广泛，AJAX的信息读取是异步的，这也表示用户不一定会等待这异步的响应，为避免重复的AJAX请求，设置缓存是优化性能的一个好方法。
Use GET for AJAX requests
用GET获取AJAX请求。又是一条有关AJAX的。AJAX的传值可用GET跟POST，在这里建议使用的是GET。
Reduce the number of DOM elements
减少页面DOM节点。也就是讲究页面代码的简洁，一个复杂的页面不仅增大页面的体积，也会对JavaScript访问DOM元素产生影响。
Avoid HTTP 404 (Not Found) error
避免404错误页面的出现。这个应该不用怎么解释了，不管从服务器资源还是用户体验上来说，都是不好的。
Reduce cookie size
减少cookie的大小。cookie一般用于身份验证等用途，一般说来cookie被限制在4K以内，尽量控制 Cookie 的大小，不要塞入一些无用的信息。
Use cookie-free domains
使用域名无关性的Cookie。这里是有关静态服务器的问题，主要是指一些静态文件比如说图片、CSS等等，比如说YAHOO，他的静态文件都在 yimg.com 上，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。
Avoid AlphaImageLoader filter
避免AlphaImageLoader滤镜的使用。这个几乎都是用在IE6下解决PNG透明的问题上的。而为了实现此效果而牺牲的性能来说，是很不合算的。
Do not scale images in HTML
不要对图片进行缩放。也就是图片的实际大小大于他的显示必要，比如一个800*600的图片，而我们在页面上只显示的是400*300的大小，那么这便是一种服务器资源的浪费。
Make favicon small and cacheable
使图标尽可能小，并使用缓存。这里指的是favicon.ico了，设置favicon.ico缓存可以避免频繁的页面请求。
相关文章网站优化——Yslow评分标准]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/481.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>简明的拼图游戏教程</title>
		<link>http://www.moondyzone.com/as3/467.html</link>
		<comments>http://www.moondyzone.com/as3/467.html#comments</comments>
		<pubDate>Mon, 15 Jun 2009 09:25:35 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Flash/AS3]]></category>
		<category><![CDATA[教程]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=467</guid>
		<description><![CDATA[想来想去，还是稍微写点东西吧，一来是想把自己的一些制作的思路与大家分享，二来也想请高手们点评一下。在这里把一些重点的部分详细说明一下，相信有点基础的朋友都能很快理解，心急点的朋友呢就直接跳到最后去看源码吧，呵呵。观看演示。
大体思路：载入图片、把图片分割、随机排列图片、鼠标点击事件、序列的比较判断是否结束。在这里只把一些关键的代码帖出来了，但不影响理解。
首先是加载图片，我们这里用的是外部载入，当然你也可以扩展一下做成可以多张图片选择的：

1
2
3
4
5
private function loadpic&#40;&#41; &#123;
	_loader = new Loader&#40;&#41;;
	_loader.load&#40;new URLRequest&#40;&#34;myphoto.jpg&#34;&#41;&#41;;
	_loader.contentLoaderInfo.addEventListener&#40;Event.COMPLETE, onImageLoad&#41;;
&#125;

接下来到了一个重点了，分割图片，这里应该会有很多种处理方法，我这里用的是Matrix控制背景图填充的方法来实现的。有更好的方法还望大家指出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
private function onImageLoad&#40;event:Event&#41;:void &#123;
	var bitmap:BitmapData = new BitmapData&#40;_loader.width, _loader.height&#41;;
	var x_num:int=480/x_p;//每小块的宽
	var y_num:int=360/y_p;//每小块的高
	bitmap.draw&#40;_loader&#41;;
	pic_box=new box_bg&#40;&#41;;
	pic_box.x=10;
	pic_box.y=10;
	addChild&#40;pic_box&#41;;
	d_arr=new Array&#40;&#41;;//初始数组
	for &#40;var i:int=0; i&#60;x_p; i++&#41; &#123;
		for &#40;var j:int=0; j&#60;y_p; j++&#41; &#123;
		var matrix:Matrix = new Matrix&#40;&#41;;
		matrix.translate&#40;-x_num * i,-y_num * j&#41;;//背景定位
		var block:Sprite = new Sprite&#40;&#41;;
		block.x=x_num * i;
		block.y=y_num * j;
		var temp_obj:Object=&#123;obj:block,b_x:block.x,b_y:block.y&#125;;
		d_arr.push&#40;temp_obj&#41;;//存入初始数组，在这里把obj也存入，方便后面的比较。
		block.buttonMode=true;
		block.graphics.lineStyle&#40;&#41;;
		block.graphics.beginBitmapFill&#40;bitmap, matrix&#41;;
		block.graphics.drawRect&#40;0,0,x_num-1, y_num-1&#41;;//通过背景图填充的方式分割图片
		block.graphics.endFill&#40;&#41;;
		pic_box.addChild&#40;block&#41;;
		&#125;
	&#125;
&#125;

图片分割好了，接下来就是要把它打散，也就是随机排列。我们刚才已经把正确的顺序存入了d_arr数组，那么现在要做的就是把这个数组复制一个出来，然后随机排列，用sort()加一个比较函数就可以实现。d_arr是初始的数组，c_arr是随机化了的数组，都包含了[obj,x,y]，把d_arr中的obj取值c_arr中的x,y，那么就实现了图片的随机排列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private function block_pic&#40;e:MouseEvent&#41; &#123;
	var fooba:ByteArray=new ByteArray&#40;&#41;;//深度复制数组。
	fooba.writeObject&#40;d_arr&#41;;
	fooba.position=0;
	c_arr=fooba.readObject&#40;&#41; [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/as3/467.html/feed</wfw:commentRss>
		<slash:comments>26</slash:comments>
		</item>
		<item>
		<title>如何看待W3C标准</title>
		<link>http://www.moondyzone.com/css/460.html</link>
		<comments>http://www.moondyzone.com/css/460.html#comments</comments>
		<pubDate>Fri, 12 Jun 2009 02:27:15 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[w3c]]></category>
		<category><![CDATA[web标准]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=460</guid>
		<description><![CDATA[WEB标准化越来越受到重视了，像我经常逛蓝色理想的，在论坛里经常会看到有关W3C标准的疑问。但不少人还是不太理解所谓标准的含意，太过于执着于W3C标准验证。说起来WEB标准的确也蛮抽象点的，我也是经历了一段时间慢慢体会的，不过在这里我希望通过一个十分明了的比喻，让大家能快速地对W3C标准有个理性上的认识。
就好比我们写文章，在这里我们定下的标准是要用中文来写！那么，只要是用中文写出来的文章，而且没有错别字，语句也通顺，那么这一篇文章就算是通过标准的文章。当然你也可以夹杂一些英文或其他什么的鸟文，这样的结果只是会有些人看得懂有些人会看不懂而已。但是，这篇文章究竟写得好不好？文笔如何？写得过于冗长还是太过苍白？会不会引人入胜……这些都不是我们的标准能够判断的。想要写出好文章（写出好页面），标准是肉体，文笔是灵魂。没有灵魂的肉体只是行尸走肉，而伟大的灵魂就算肉体有所残缺依然掩盖不了其伟大。
相信这个比喻大家都能理解吧。
相关文章走出WEB标准的误区什么是Ｗ3Ｃ标准？]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/460.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>解决IE8的兼容问题，X-UA-Compatible meta标签</title>
		<link>http://www.moondyzone.com/css/445.html</link>
		<comments>http://www.moondyzone.com/css/445.html#comments</comments>
		<pubDate>Tue, 09 Jun 2009 02:25:48 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[兼容]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=445</guid>
		<description><![CDATA[IE8来了，于是不少的项目要求中都会增加了兼容IE8这一条，但当前IE8还很不完善，还算是测试版中，之前某些已经兼容的页面，放到IE8中却变得惨不忍睹，相信很多web desginer都有同感吧。还好IE8提供了一个新的标签X-UA-Compatible，它只能被IE8识别，用来设置IE8的兼容性，就好比现在的vista要去兼容一些旧版的程序一样。
网上找到的相关资料基本上都是同一篇译文，也不知最初的译者是谁了，我就直接转载过来啦。
英文原文：http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
前言
为了帮助确保你的网页在所有未来的IE版本都有一致的外观，IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式，文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。
新的IE为了确保网页在未来的版本中都有一支的外观，IE8引入了文件兼容性。当你引入一个增设的兼容性模式，此文章说明文件兼容性的必要性，列出现有版本IE能使用的文件兼容性模式并示范如何选择特定的兼容性模式。
了解文件兼容性的必要性
每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色，其中一个风险就是旧版本网站无法正确的显示。
为了将这个风险降到最低，IE6允许网页开发人员选择IE编译和显示他们网页的方式。&#8221;Quirks mode&#8221;为预设，这会使页面以旧版本浏览器的视点显示，&#8221;Standards mode&#8221;(也称为&#8221;strict mode&#8221;)特点是支持业界标准最为完善。然而要利用这个增强的支持功能，网页必须包含恰当的&#60;!DOCTYPE&#62;指令。
若一个网页没有包含&#60;!DOCTYPE&#62;指令，IE6会将它以quirks mode显示。若网页包含有效的&#60;!DOCTYPE&#62;指令但浏览器无法辨识，IE6会将它以IE6 standards mode显示。因为少数网站已经包含&#60;!DOCTYPE&#62;指令，兼容性模式的切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。
随著时间经过，更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说，IE6不支持universal selector(即css之全局选择器 * {})，一些网站便使用它来针对IE做特定的对应。
当 IE7增加了对全域选择器的支持，那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的特定对应无法应用于IE7，造成这些网站便无法如他们预期的显示。由于&#60;!DOCTYPE&#62;只支持两种兼容性模式，受到影响的网站拥有者被迫更新他们的网站使其能支持IE7。
IE8 比之前的任何版本浏览器都更支持业界标准，因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮助减轻所有问题，IE8引入文件兼容性的概念，使你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加了一些新的模式，这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示，你可以更新你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器编译你的页面。
这能让你选择将你的网站更新支持IE8新特点的时机。
认识文件兼容性模式
IE8支持几种文件兼容性模式，它们具有不同的特性并影响内容显示的方式。
•Emulate IE8 mode指示IE使用&#60;!DOCTYPE&#62;指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode，Emulate IE8 mode重视&#60;!DOCTYPE&#62;指令。
•Emulate IE7 mode指示IE使用&#60;!DOCTYPE&#62;指令来决定如何编译内容。Standards mode指令会显示成IE7 Standards mode而quirks mode会显示成IE5 mode。不同于IE7 mode，Emulate IE7 mode重视&#60;!DOCTYPE&#62;指令。对于许多网页来说这是最推荐的兼容性模式。
•IE5 mode 编译内容如同IE7的quirks mode之显示状况，和IE5中显示的非常类似。
•IE7 mode编译内容如同IE7的standards mode之显示状况，无论网页是否含有&#60;!DOCTYPE&#62;指令。
•IE8 mode提供对业界标准的最高支持，包含 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API，并有限的支持 W3C Cascading Style Sheets [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/445.html/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>一个拼图游戏的DEMO</title>
		<link>http://www.moondyzone.com/demo/439.html</link>
		<comments>http://www.moondyzone.com/demo/439.html#comments</comments>
		<pubDate>Mon, 08 Jun 2009 08:53:48 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[My Demo]]></category>
		<category><![CDATA[Flash/AS3]]></category>
		<category><![CDATA[游戏]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=439</guid>
		<description><![CDATA[这游戏也很简单，也就是想自己练练算法了。这里只是个DEMO，但主要部分都包括了。主要是因为对界面设计实在头疼，再者做练习嘛，而且是被别人做得不爱做了的游戏，就没弄得那么完整了。
其实对于高手来说，拼图游戏只算是小菜了。我不是高手，也许我的方法不是最优的，但绝对是原创的，相信还是能给一些正在学习中的朋友一些帮助。过些天整理一个小教程出来吧，到时连源码一起发。

源码及教程
相关文章一个仿FLASH自带的取色器最近在研究PV3D了——360度全景图一个自制的AS3 MP3播放器原创贪吃蛇——贪吃蛇的新玩法火眼金睛——考眼力咯！一个既成功又不成功的作品——特技飞行]]></description>
		<wfw:commentRss>http://www.moondyzone.com/demo/439.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>解决FLASH中链接被当做弹窗拦截的问题</title>
		<link>http://www.moondyzone.com/as3/432.html</link>
		<comments>http://www.moondyzone.com/as3/432.html#comments</comments>
		<pubDate>Fri, 05 Jun 2009 01:14:51 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Flash/AS3]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[拦截]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=432</guid>
		<description><![CDATA[不知有没有朋友碰到过这类的问题，在某些浏览器中，点击FLASH中的链接会被当做弹窗给拦截屏蔽掉。而也许有些朋友一直都没碰到过这个问题。其实这只是一个小小的习惯性问题。
其实以前我也都没有注意到这点，在FLASH中做链接的时候，往往都用on(press){}来触发，而这正是造成这个问题的原因，改为on(release) {}就没事了。同样，在AS3中用CLICK事件来触发的话，也会碰到被拦截的问题，推荐采用MOUSE_DOWN或者MOUSE_UP。但还有的朋友说，已经这样做了但还是被拦截，那就没办法了，采用终极招式吧，在FLASH的上面浮动一个等大的A标签，当然还需要填充透明GIF在里面，这样才能在IE中触发点击区域，把链接直接写到这个A标签就好了，其实现在有蛮多大站也都采用这种方法的呢。
暂时没有相关文章！页面复制的完美解决方案最近在研究PV3D了——360度全景图CSS滑动门技术详解全兼容的标准三级菜单HTML 4.01 / XHTML 1.0 标签参考手册今天起床打开QQ，收到朋友一条信息……]]></description>
		<wfw:commentRss>http://www.moondyzone.com/as3/432.html/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
	</channel>
</rss>

