<?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 &#187; Xhtml/Css</title>
	<atom:link href="http://www.moondyzone.com/class/css/feed" rel="self" type="application/rss+xml" />
	<link>http://www.moondyzone.com</link>
	<description>一位IT民工的点点滴滴……  WEB前端、网页重构、AS3</description>
	<lastBuildDate>Wed, 18 Aug 2010 07:54:51 +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>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>23</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。
最后再说下，在不是很有必要的情况下，我觉得还是保证图片的原尺寸比较好，因为缩放的还是不及原尺寸的清晰。
暂时没有相关文章！一组超酷的AS3音频频谱波形搬进腾讯大厦了，我也来晒一晒图~~AS3+XML自定义尺寸轮换广告DIV+CSS布局中常用的列表元素（ul ol li dl dt dd）详解AS3中JSON的基本应用实例原创贪吃蛇——贪吃蛇的新玩法]]></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/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>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>9</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>6</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>如何看待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>一道看似简单的面试题</title>
		<link>http://www.moondyzone.com/css/428.html</link>
		<comments>http://www.moondyzone.com/css/428.html#comments</comments>
		<pubDate>Mon, 01 Jun 2009 13:23:28 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[面试]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=428</guid>
		<description><![CDATA[曾经做过一么一题面试题，大体上的要求是这样的：一个新闻列表，日期要紧随标题之后，标题太长时可以自动隐藏，但日期要显示完整。

就这么个题目，看起来似乎很简单，但做起来似乎就没那么简单了。因为这里要求是时间紧随标题之后，如果是时间右对齐的话，相信大多数人片刻就能搞定。有兴趣的朋友不妨先不看下面的源码，自己做做试试。
因为日期是跟在标题后面的，所以这里要用内联标签，但这会在自动隐藏标题的时候出现问题。最后，想到了一种特殊的处理方法。外框的宽度比如说是300px，那么就把ul的宽度定为240px，然后通过绝对定位把日期从文档流中拖出，这时当标题达到ul的宽度的时候将之隐藏，而日期因为浮动而跟随其后，就达到所要的效果了。
PS：原来没有考虑到opera的兼容，现已修正，不过用了hack，暂时没想到好方法了。


&#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;demo&#60;/title&#62;
&#60;style type=&#34;text/css&#34;&#62;
body {font:normal 12px &#34;宋体&#34;,Verdana, Arial, Helvetica, sans-serif;}
ul {margin:0; padding:0;}
li {list-style-type:none;}
a {color:#333; text-decoration:none;}
a:hover {color:#900; text-decoration:none;}
div {width:300px;}
	div ul{display:block; width:240px;}
	div li {display:inline-block; *display:inline; zoom:1; position:relative;}
		div li a {display:block; *display:inline; zoom:1; height:22px; line-height:22px; overflow:hidden;}
		div li span {position:absolute; top:0; right:-60px; padding-left:10px; line-height:22px; color:#999; }
&#60;/style&#62;
&#60;/head&#62;
&#60;body&#62;
&#60;div&#62;
	&#60;ul&#62;
    [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/428.html/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>全兼容的标准三级菜单</title>
		<link>http://www.moondyzone.com/css/416.html</link>
		<comments>http://www.moondyzone.com/css/416.html#comments</comments>
		<pubDate>Tue, 26 May 2009 02:52:11 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[兼容]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=416</guid>
		<description><![CDATA[首先，说明一下这不是纯CSS的，如果要用纯CSS实现的话要用到很多[if IE 6]的判断，感觉页面的标签很乱，个人不太喜欢。说到底还是因为这万恶的IE6,基本上问题都是出在这里，本例用的是JS，但也用了一个[if IE 6]的判断，用来在IE6下改变标签的class。虽然是用了JS，但页面结构却清爽得多。
可能有些朋友见过，原本是在一个国外网站上看到的，不过写得有点复杂，我简化了一下，帖上来。


&#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=&#34;text/javascript&#34; src=&#34;http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js&#34;&#62;&#60;/script&#62;
&#60;!--[if IE 6]&#62;
&#60;script type=&#34;text/javascript&#34;&#62;
$(document).ready(function(){
  $(&#34;#navmenu li&#34;).hover(
    function() { $(this).addClass(&#34;iehover&#34;); },
    function() { $(this).removeClass(&#34;iehover&#34;); }
  );
});
&#60;/script&#62;
&#60;![endif]--&#62;
&#60;script type=&#34;text/javascript&#34; src=&#34;js/jquery.js&#34;&#62;
$(document).ready(function() {
  $('.links li code').hide();
  $('.links li p').click(function() {
   [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/416.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>IE6中select挡住DIV的BUG</title>
		<link>http://www.moondyzone.com/css/312.html</link>
		<comments>http://www.moondyzone.com/css/312.html#comments</comments>
		<pubDate>Mon, 11 May 2009 07:20:34 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[bug]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=312</guid>
		<description><![CDATA[前阵子碰到一个问题，就是在IE6中select会把浮动的DIV给挡住，通常情况都是用JS控制某个DIV显示隐藏的情况下发生的。这冲时候不管怎么设z-index值都没有用。

我也查了很多资料，说这是IE6的一个BUG（哎，万恶的IE6），解决的办法不外乎两种：1、用DIV模拟一个select出来。2、在隐藏层的底部加一个透明的iframe。第一种感觉花的工夫比较大，暂时就用第二种方法了，我这个原本用的是jquery的框架，这里我就把jquery的帖上来了。在你要调用的JS文件里加上这么一段：

1
2
3
4
5
6
7
8
9
10
11
12
&#40;function&#40;$&#41;&#123;$.fn.bgIframe=$.fn.bgiframe=function&#40;s&#41;&#123;
if&#40;$.browser.msie&#38;amp;&#38;amp;/6.0/.test&#40;navigator.userAgent&#41;&#41;
&#123;s=$.extend&#40;&#123;top:'auto',left:'auto',width:'auto',height:'auto',opacity:true,
src:'javascript:false;'&#125;,s&#124;&#124;&#123;&#125;&#41;;var prop=function&#40;n&#41;&#123;
return n&#38;amp;&#38;amp;n.constructor==Number?n+'px':n;&#125;,html='&#38;lt;
iframe frameborder=&#34;0&#34;tabindex=&#34;-1&#34;src=&#34;'+s.src+'&#34;'+'style=&#34;display:block;
position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;
filter:alpha(opacity=0);-moz-opacity:0;&#34;/&#38;gt;';
return this.each&#40;function&#40;&#41;
&#123;if&#40;$&#40;'&#38;gt; iframe.bgiframe',this&#41;.length==0&#41;
this.insertBefore&#40;document.createElement&#40;html&#41;,this.firstChild&#41;;
&#125;&#41;;&#125;return this;&#125;;&#125;&#41;&#40;jQuery&#41;;

然后在你应用的页面调用

1
2
3
4
5
&#60;script&#62;
  $&#40;document&#41;.ready&#40;function&#40;e&#41;&#123;
   $&#40;'.your_class'&#41;.bgiframe&#40;&#41;;
 &#125;&#41;//其中your_class是被挡住的层的类名。
&#60;/script&#62;

相关文章a:hover在IE6中的BUG全兼容的标准三级菜单IE6中出现重复字符的BUGCSS3测试之——QQ企鹅斜角导航及滑动门的延伸对CSS渲染效率的一些研究]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/312.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>HTML 4.01 / XHTML 1.0 标签参考手册</title>
		<link>http://www.moondyzone.com/css/296.html</link>
		<comments>http://www.moondyzone.com/css/296.html#comments</comments>
		<pubDate>Wed, 06 May 2009 06:42:34 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[手册]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=296</guid>
		<description><![CDATA[记得在初期的时候，工作中时不时都要去查一查CSS手册，后来慢慢地经验多了也就基本上不用查手册了。但是为了向WEB标准靠拢，近来都比较常用到HMTL手册。不管怎么说，这两本手册也应该是一个WEB前端人员必备的吧。CSS手册之前发过，这里把HMTL的发上来吧。
下载：xhtml_reference.rar
相关文章CSS 2.0中文手册(含索引)CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/296.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>如何让块级元素实现display:inline-block</title>
		<link>http://www.moondyzone.com/css/292.html</link>
		<comments>http://www.moondyzone.com/css/292.html#comments</comments>
		<pubDate>Fri, 01 May 2009 13:36:28 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=292</guid>
		<description><![CDATA[关于display:inline-block，手册上是这样解释的：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。这个属性算是有点冷门吧，也许有些朋友平时也不怎么会用到这个属性。不过在某些情况下给一些内联元素用display:inline-block，比如说a标签或span标签，会省不少工夫，比如说之前发的一个滑动门效果就是这样用的。
不过在这里又发现了一个问题，在块级元素上这个属性无效，比如说加在DIV上但此DIV还会是行布局。其实在这里也只是想深入研究一下而已，在实际项目中完全可以用别的方法避免这个问题的产生。所以也查阅了不少资料，其实内联元素也并非是真正支持display:inline-block，只是因此触发了hasLayout属性，而使其拥有了display:inline-block 的特性。而应用到块元素上时，同样也只是被触发了hasLayout属性，所以还是分行布局。而关于hasLayout，可能有很多朋友会觉得陌生，大家可以参阅一下这篇文章《On having layout》，原文件的链接好像有点问题，我这里链的是蓝色理想上的一篇转载。
接下来就应该说说如何解决这个问题了，有两种方法。
1、先定义display:inline-block ，再定义display:inline，不过要分开定义才有效，这好像是IE的一个BUG。

1
2
div &#123;display:inline-block;...&#125;
div &#123;display:inline;&#125;

2、直接定义display:inline，然后再触发块级元素的hasLayout，如何触发在之前提到的那篇文章有详细说明。

1
div &#123;display:inline; zoom:1;...&#125;

相关文章CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签一道看似简单的面试题]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/292.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>CSS滑动门技术详解</title>
		<link>http://www.moondyzone.com/css/285.html</link>
		<comments>http://www.moondyzone.com/css/285.html#comments</comments>
		<pubDate>Wed, 29 Apr 2009 13:08:47 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[滑动门]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=285</guid>
		<description><![CDATA[其实CSS滑动门这个概念早在几年前就已经出现了，只是近来年被提得比较多而已。但是常常有人把它跟选项卡效果混淆在一起，特别是一些新手朋友，所以我在这里写篇详解，希望能有所帮助。
说起来滑动门也不是什么高深的技术，也只是CSS的一种手法罢了。它是利用背景图像的交迭以及相互滑动来实现一些效果。最常见的就是圆角的导航了，我们可以把一左一右两个圆角背景想像成两扇可以滑动的门，他们可以滑到一起并交迭以显示较少的内容，也可以相互滑开以显示较多的内容，就如下图所示：

在以往的一些教程中，都喜欢把背景图切成一宽一窄两部分进行拼接，其实一张图就足矣。

在这里，我们只用了&#60;a&#62;跟&#60;span&#62;两个标签，样式可以定义三种状态，可以说是最简单的一种方式了。此为本民工原创，如有雷同纯属巧合，转载请注明出处。


&#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;
body {font-size:12px;}
.nav {margin:0 auto; text-align:center; font-weight:bold; border-bottom:3px solid #579cc6;}
.nav a {display:inline-block; margin:0 -4px; height:25px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) left bottom no-repeat; padding-left:15px; color:#666; text-decoration:none; cursor:pointer;}
.nav a span {display:inline-block; height:25px; line-height:25px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right bottom no-repeat; padding-right:15px;}
.nav a:hover {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) left top no-repeat; color:#FFF;}
.nav a:hover span {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right top [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/285.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>网站优化——Yslow评分标准</title>
		<link>http://www.moondyzone.com/css/279.html</link>
		<comments>http://www.moondyzone.com/css/279.html#comments</comments>
		<pubDate>Sat, 25 Apr 2009 08:37:40 +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=279</guid>
		<description><![CDATA[YSlow 是Yahoo开发者团队发布的一款基于Firebug的插件。Yshow=why slow?是用于用于分析网页，并根据一些高性能网站的规则进行相应的评级打分，对于网页性能优化有很好的帮助作用，告诉你那些部分影响了你的网页速度。
今天用Yslow评了一下我前不久做的一个站的页面，结果是73分。

这里一共有13条主要规则，而想要满足这13条规则达到网站速度的最佳优化，并不是一个WEB前端技术员能独立完成的。其中第2、3、4及13条，需要网络服务器相关的技术来解决，这也是我这页面评分不高的原因了。下面具体来说明一下这13条规则：
1、Make fewer HTTP requests&#8211;更少的http请求，也就是说页面中尽量少的引用外部静态资源，js、css以及图片。
        80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。要做到这一点有很多方法，比如使用CSS Sprites整合图片、合并CSS文件（不需要划分为什么色彩样式、布局样式、文字样式之类的）、合并JS文件。
2、Use a CDN&#8211;使用CDN网络，将页面中的静态资源分布到离用户最近的网络节点上。
        这是有关服务器线路的问题，我也不是太了解，放在国内的话大体上也就是电信、网通、双线、多线的意思了。
3、Add an Expires header&#8211;为静态资源文件增加过期时间，让用户通过本地缓存来更快的访问网站。
        设置静态文件的过期时间，最开始的时候我找了好久也没找到这个过期时间要怎么加，原来这个也不属于前端人员的范畴，找服务器管理人员去了解下吧。
4、Gzip components&#8211;压缩静态资源内容，减少网络传输时间。
        这个应该很熟悉了，Gzip的思想就是把文件先在服务器端进行压缩，然后再传输，在客户端再进行解压。对于当前的PC机配置来说，这点点的解压工程实在是微乎其微。不过跟上一条一样，也是属于服务器管理人员的范畴了。
5、Put CSS at the top&#8211;将CSS放在页面头部，能够更快渲染页面。
        这个很容易理解，而且绝大部分人也都会这么做的。无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染。
6、Put JS at the bottom&#8211;将JS放在页面底部，一般情况下JS的下载是阻塞模式的，放在页面顶部会阻塞其他资源的下载。
        跟上一条一样，很多人都习惯了把JS也放在头部，这样不仅会阻塞其它资源的下载，而且JS一般都是用来交互的，如果页面都还没有出来，何来的交互呢？所以JS还是要放到底部加载。
7、Avoid CSS expressions&#8211;不要使用CSS表达式，因为CSS表达式需要很多资源，有时甚至会造成页面假死。
        expressions其实就像是其它语言中的if……else……可以在CSS中进行逻辑判断，但是这样的代价是非常大的，曾经我为了满足IE6下的图片大小自适应用了这么个语句，结果页面慢如蜗牛。
8、Make JS and CSS external&#8211;将CSS和JS使用外部的独立文件。
        看起来跟第1条有点矛盾，不过这应该看具体情况了。javascript和css都有缓存，独立成外部文件的话，有利于提高用户再次访问时的效率。而某些大站比如yahoo，会把CSS及JS都写在页面里，那是因为访问量太大，尽可能的减少请求数。如果你的网站访问量还不是那么地惊人的话，还是独立出来比较好。
9、Reduce DNS lookups&#8211;减少DNS查找。
        这一点虽然也是服务器方面的问题，不过还是很好理解。也就是说不要把同一个网站的内容分散在不同的服务器上。比如说，一个图片站，因为空间大小的关系把某一部分图片放在了另一个服务器上，那么这一部分的图片在浏览的时候就会慢很多。
10、Minify JS&#8211;最小化压缩JS，减少JavaScript和CSS文件的体积。
        这个应该见得多了，我们应该经常会见到被压成一行的JS以及CSS文件，压缩工具在网上随处都可见。
11、Avoid redirects&#8211;避免无意义的跳转。
        这里有一种现象常常会被开发者所忽略，这种现象发生在当URL本该有斜杠（/）却被忽略掉时，这时候会返回一个301的状态码，然后浏览器重新发起一次请求，这其中就浪费掉了时间。
12、Remove duplicate scripts&#8211;去除重复的脚本，不光是文件，甚至是同功能的函数。
       这个道理很浅显，我想也不用说明太多了。
13、Configure ETags&#8211;配置实体标签。
        Etag（Entity tags ）实体标签。这个tag和你在网上经常看到的标签云那种tag有点区别。这个Etag不是给用户用的，而是给浏览器缓存用的。Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制。通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上重新下载。这也是服务器人员的工作范畴，有兴趣的可以了解下。
后记，其实写这文章之前，有很多概念都是模模糊糊的，所以也查阅了很多资料。不过现在都清晰啦，这也是一种不错的学习方法呢。
相关文章新版本Yslow 22项评分标准CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/279.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>完美的DIV三行三列自适应高度布局</title>
		<link>http://www.moondyzone.com/css/251.html</link>
		<comments>http://www.moondyzone.com/css/251.html#comments</comments>
		<pubDate>Thu, 16 Apr 2009 08:04:36 +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=251</guid>
		<description><![CDATA[我们一般拿出来讨论的自适应高度的DIV布局，都是指有背景区分的，不用区分的三列布局很容易。不过在实际应用中很少有网站这样用，大多都是不用背景区分的。不过在这里我们并不讨论这种布局的实用性到底如何，而只是讨论实现这种布局的一种较完美的解决方案而已。
所谓自适应高度，也就是不管某一列撑长而其它列的高度也跟跟相应地撑长，这个效果如果用TABLE的话是轻而易举的，而用DIV就没那么容易了。之前本民工也尝试了不少办法，比如用JS控制、padding-bottom一个很大的负值……但都觉得不够完美。后来在蓝色理想找到一个国外的站，感觉这是目前为止最完美的一种解决方案了，不用hack、不用JS、兼容性强……他们把这种布局称之为：完美的圣杯。

原理其实很容易，理解之后应该可以解决很多样的布局方案。见上图，.colmask、.colmin、.colleft，分别为三列背景的容器，最外层的.colmask设定overflow:hidden;，通过相对定位分成三列。而内容容器.col1、 .col2、 .col3都放在最内层的.colleft里面，通过相对定位定好位置，所以不管.col1、 .col2、 .col3哪一个伸长或缩短，外部的.colmask、.colmin、.colleft都会跟着伸长与缩短，也就实现了我们所要的效果。
今天刚装上了运行代码的插件，贴上来试试。


&#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;demo&#60;/title&#62;
&#60;style type=&#34;text/css&#34;&#62;
body {margin:0;	padding:0; font-size:12px;}
.header {width:100%; height:50px; background:#EEE; border-bottom:1px solid #000;}
.colmask {position:relative; clear:both; width:100%; overflow:hidden;}
.colright, .colmid, .colleft {float:left; width:100%; position:relative;}
.col1, .col2, .col3 {float:left; position:relative; overflow:hidden;}
.threecol {background:#BBB;}
	.threecol .colmid {right:20%; background:#CCC;}
	.threecol .colleft {right:60%; background:#DDD;}
	.threecol .col1 {width:58%;	left:101%;}
	.threecol .col2 {width:18%;	left:23%;}
	.threecol .col3 {width:18%;	left:85%;}
.footer {clear:both; width:100%; [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/251.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>兼容浏览器的DIV最小高度自适应</title>
		<link>http://www.moondyzone.com/css/245.html</link>
		<comments>http://www.moondyzone.com/css/245.html#comments</comments>
		<pubDate>Tue, 07 Apr 2009 09:57:14 +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=245</guid>
		<description><![CDATA[其实这个问题经常会碰到：容器需要跟据其内容自适应高度，但在内容不够时又要保持一个最小高度。最初的时候我也曾饱受其困扰，因为IE6不支持min-height的属性，IE6中直接用height就可实现最小高度自适应。而在IE7跟FF中，用了height属性的话就不能自动撑长了。所以就有这么一种解决方法，给IE7跟FF设定min-height以及height:auto，而另外用一个IE6的hack来解决IE6下的问题。
不过本民工一向不喜欢用hack，能不用就尽量不用，所以经多方考证找到另外一种方法：

1
div &#123;height:auto !important; height:300px; min-height:300px;&#125;

由于用了!important，所以IE7跟FF会认height:auto属性，而IE6的话就只认height属性了。不过要注意，不要设置overflow:hidden属性，在某些需要清除浮动的场合可能会用上overflow:hidden。
相关文章解决IE8的兼容问题，X-UA-Compatible meta标签全兼容的标准三级菜单CSS实现兼容浏览器的文字阴影效果兼容各浏览器的FLASH透明方法CSS3测试之——QQ企鹅兼容浏览器的页面复制代码]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/245.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>也谈一谈css sprites技术</title>
		<link>http://www.moondyzone.com/css/240.html</link>
		<comments>http://www.moondyzone.com/css/240.html#comments</comments>
		<pubDate>Sun, 05 Apr 2009 08:54:32 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[css sprites]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=240</guid>
		<description><![CDATA[其实说起来，css sprites算不上一门什么高深的技术，应该只能算是一种技巧吧。也就是通过背景图的定位（background-position ）把页面中所用到的图标、背景图之类的整合到一张整的背景图里，从而大大减少了页面请求数，提高了页面浏览的性能。
 其实本民工最初这样用的时候并不知这就叫css sprites，只是看到各大主流站都是这么做于是也效仿而已。比如下面这张图，是腾讯主站背景图的一部分：

定位的样式其实只用一句：

1
background: url&#40;&#34;your_url.gif&#34;&#41; x y no-repeat;

关于CSS中的坐标，图片的最左上角为（0,0）,而定位图片内部的位标的话，x、y都是负值。还有，可以把需要repeat的跟no-repeat的图分开，如果放在一起的话那么就需要考虑一下图片的延展性就可以了。
 实现css sprites并不难，只要有点耐心与细心就可以了。在制图的时候建议用Fireworks，他可以把图片精确定位到某个坐标，这是PS做不到的。采用css sprites对页面性能的提升是毋庸置疑的，只是在后期的修改与维护上麻烦了点而已，具体怎么用，可以跟据项目的具体情况来决定了。比如说，本民工的博客就没这样用，因为跟本就没用到几张图片，嘿嘿。
相关文章CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签一道看似简单的面试题]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/240.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>走出WEB标准的误区</title>
		<link>http://www.moondyzone.com/css/235.html</link>
		<comments>http://www.moondyzone.com/css/235.html#comments</comments>
		<pubDate>Tue, 31 Mar 2009 07:28:32 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[web标准]]></category>
		<category><![CDATA[误区]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=235</guid>
		<description><![CDATA[记得好像是05年吧，一本名为《网站重构》的书登陆了中国，也许它的译者阿捷自己也没意识到，这本书会对国内的业界产生什么样的影响。
05年，本民工还只是一个刚刚出道的菜鸟，当时还是一个靠着TABLE打天下的年代，这本书的确给当时国内的WEB技术带来了一场革命。书的确是本好书，但书本的语言中充斥着太多对以往TABLE结构的不满，让很多人特别是没经历过TABLE年代的新人把TABLE标签无情地抛弃，甚至唾弃的程度。而书本中反复出现的“DIV+CSS”这个词，则在很长一段时间里被认为就是WEB标准。于是，WEB标准结构变成了DIV的卖场，打开一个页面源码，看到的都是DIV没有TABLE那就算是个标准的页面、招聘信息里都写着什么精通DIV+CSS云云……-_-!
就连在今天，存在这样误解的人也还不在少数。也许是我们太渴望标准而走向了另一个极端。其实在《网站重构》中也没有说过禁止用TABLE，其实在一些数据内容的表现上，TABLE要优于DIV，比如说排一个“课程表”。TABLE也是符合W3C标准的标签之一，不应该如此的排斥。
从W3C标准的定义可以看出：W3C标准并不是某一个单独的标准，而是一系列标准的集合，包括结构、表现、行为三部分。这里的结构指的是标准化结构语言：XHTML、XML，而不是单指DIV。而网站重构更是一种理念，并不是做出一个页面来然后到http://validator.w3.org/通过了验证，就是一个好的页面，我们并不是为了标准而标准。网站重构所推崇的理念，应该是以更符合语义化的标签来构建简洁且易于维护的页面，良好的扩展性以及优秀的用户体验。
最后说点题外话，虽然现在WEB前端技术也渐渐地被重视，但国内的整体现状还是比较“惨淡”。浮躁的氛围让技术人才往往过早放弃了自己的技术生涯，而尔虞我诈的整体道德水平也让单纯的技术人员痛不欲生~~~希望还在这条路上奋斗的朋友们，保持好心态、把握好机会，曙光会出现的。
相关文章如何看待W3C标准什么是Ｗ3Ｃ标准？]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/235.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>总结一下CSS的缩写方法</title>
		<link>http://www.moondyzone.com/css/227.html</link>
		<comments>http://www.moondyzone.com/css/227.html#comments</comments>
		<pubDate>Tue, 24 Mar 2009 13:50:42 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[CSS简写]]></category>
		<category><![CDATA[CSS缩写]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=227</guid>
		<description><![CDATA[关于写CSS，本民工比较习惯于手写，很多写样式软件写写得快是快，但写出来的东西总会觉得有种“不干净”的感觉。个人看法而已哈，不过既然是手写，CSS的缩写当然是要注意的，会让你的CSS看起来很简洁，也容易阅读。接下来，把经常用到的一些简写形式来总结一下。
颜色（color）
16进制的色彩值，如果每两位的值相同，可以缩写一半，
例如：#000000可以缩写为#000;#336699可以缩写为#369;
盒尺寸（margin、padding）
通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1； 
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left 
本民工的计算方法是按顺时针数，上右下左。
例如：margin:1em 0 2em 5px;
边框（border）
边框的属性如下：
border-width:1px; 
border-style:solid; 
border-color:#000; 
缩写的顺序其实都可以互换，不过推荐用以下的缩写顺序：
语法是border:width style color; 
例如上面的可缩写为：border:1px solid #000;
背景(Backgrounds)
背景的属性如下：
background-color:#f00; 
background-image:url(background.gif); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:0 0; 
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent 
image: none 
repeat: repeat 
attachment: scroll 
position: 0% 0% 
另外要注意的是position属性在缩写时如果只想定义其中一个，也需要把另一个加上。
字体(fonts)
字体的属性如下：
font-style:italic; 
font-variant:small-caps; 
font-weight:bold; 
font-size:1em; 
line-height:140%; 
font-family:&#8221;Lucida Grande&#8221;,sans-serif; 
可以缩写为一句：font:italic small-caps bold 1em/140% &#8221;Lucida Grande&#8221;,sans-serif;
要注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
不过font-family值大部分情况下都会全局定义，所以也不是经常用到。
列表(lists)
取消默认的圆点和序号用这句：list-style-type:none;
list的属性如下:
list-style-type:square; 
list-style-position:inside; 
list-style-image:url(image.gif); 
可以缩写为一句：list-style:square inside url(image.gif);
这个平时也用得少咯。
相关文章CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签一道看似简单的面试题]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/227.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
