为了赶个早场，我是5：30就起床了（上课从来木有这样积极过，好惭愧～），和我的同事们一行十人浩浩荡荡就杀到了 w3ctech 设在上海海神诺富特大酒店的会场，足足离正式开场提前了一个小时，好鸡冻呀。根据之前在邀请函里所公布的日程安排，此次参加 w3ctech 盛会的嘉宾阵容那是相当的强大，有来自盛大的搞笑主持人周裕波童鞋，有来自 W3C 的美女李安琪姐姐，还有来自马来西亚的帅锅谢子斌 GG，还有百度、腾讯、口碑网、优酷、酷6等业内顶尖的牛人们，当然还有那些隐藏在来参加此次交流大会的各路大神们。

像我这样初学者级的小盆友过去纯粹是打个酱油，见一下大牛的，两眼闪着羡慕嫉妒恨的泪花仰望他们，不过除了打酱油，对此次 HTML5 的交流会还是很有收获的，完全颠覆了我对 HTML5 的看法。BS 我自己之前我 HTML5 的认识是如此的肤浅，完全脱离 HTML5 的深层次 web apps 应用，特别是 HTML5 在手持终端上的应用，比如说磊友科技的赵霏大神谈到的 HTML5 手机浏览器设计，因为涉及到的手机浏览器比较底层的开发，我听得不是太懂，但是大大开扩了我的眼界；还有盛大创新院的程劭非大神，由浅入深地介绍了 HTML5 在 Bambook 电子书开放平台中的应用（虽然有点点 AD 的嫌疑）；以及来自腾讯的于涛大神，向我们展示了 webQQ 在 HTML5 方面应用到的先进技术；还有优酷何涛大神向我们秀了一下他们在 iPAD 等手持设备上的完美兼容，让人叹服。还有还有，与会的某位我叫不上名字的听众向我们展示了他用 HTML5 做的基于 WEB 的游戏，其中移植了 MAC 上的那款超热门的游戏愤怒的小鸟，纯 HTML5 的哟！！！太特么牛叉了！

另外有一个让人兴奋的事情，HTML5 设计原理的演讲者，Jeremy Keith，也就是《JavaScript DOM 编程艺术》的作者亲临现场，明天将会有一场他现场演绎的 HTML5 设计原理，可惜我明天要考试，不能再逃课了，无缘他的现场版了。但是让人欣慰的是今天有他的《JavaScript DOM 编程艺术》这本书的签售，哇，这个热闹我要凑一下，于是毫不犹豫掏出我皮夹里仅剩的一张百元大钞买下了他的书让他签名，如果 Jeremy Keith 知道那是我坚持到本月底的饭钱的话，他一定会感动到哭的。本来想让 Jeremy Keith 给我签个中文名，描一个也行嘛，8过人家说描也不会，好吧，那就签我名字的拼音吧。

本来还有一个环节是让人鸡冻兴奋的，那就是抽奖送礼品（赞助商提供的书啥的），但是因为没有我的份而显得黯然失色，唉，不提了。

其实我是更期待明天那一场的 w3ctech 的拥抱 HTML5，那几个话题我更感兴趣，看我明天考完试赶到现场还来不来的及吧。恩恩，确实是一个不错的组织，一场完美的盛会，如果可以的话，w3ctech 的下一场交流会我也一定要去看看。

每次看到自己的网站在 W3C 验证之下显示绿绿的一条 “This document was successfully checked as HTML5!”心情就会无比嗨皮。所以心情有所不爽的时候，我就会去玩一下这个验证，然后让自己爽一下，YY有益身心健康～昨天被 Google 打击了一下，心情低落，于是今天又想拿 W3C 来自我娱乐一下。但是出我意料的是，之前已经通过 W3C 验证的主题居然又不能通过验证了？！这是神马情况？连 W3C 也要来欺负我吗？

检查了一下首页和内页，错误百出，和之前一片绿绿的“This document was successfully checked as HTML5!”结果大相径庭，我撒泪当场。又仔细检查了一下错误的提示，所有的错误都指向了页面中的 onclick 属性。onclick 有什么问题吗？我之前也是这么用的，不是已经通过 W3C 的 HTML5 验证了吗？怎么一会儿又不让过了呢？

我想唯一的解释就是 W3C 规则对于 HTML5 的解释也在与时俱进的修改着，我还没有看到任何官方的文档对此有作什么解释，所以也只是用自己的经验猜测。到底是 HTML5 在进步呢？还是 W3C 规则在完善呢？好吧，也管不了那么多，反正咱就不能落后了，明天找找原因要把这些错误搞定了，继续追求我的完美。

我们知道，像 border-radius 这样一些 CSS3 的属性即使在高级的 Firefox、Chrome 等浏览器中也是不能直接支持的，必须要加上 -moz-、-webkit- 这样的私有属性前缀才可以让浏览器们支持。但是很遗憾的是，在样式表中加上这些私有属性之后就无法通过 W3C 的验证，CSS2.0 说我们家族里没有 border-radius 这样的属性，CSS3.0 说我们家族里没有 -moz-、-webkit- 这样的怪胎。多杯具呀。

Willin 大师的方法让私有属性的 W3C 验证不再杯具（不知道是不是 Willin 大师的首创，至少这招我是从他那里学来的）。怎么一个方法呢？其实很简单，就是把样式写进 Javascript，W3C 验证会无视脚本，多简单的原理，只是我们都没有想到这一点。

举个例子，如下样式：

如果要写进 Javascript 的话就应该是：

就是这样简单的转换就可以帮助你的浏览器私有属性通过 W3C 的验证，当然有了这个原理，我们还可以扩展一下，比如说 IE 的滤镜、expression 等被 W3C 认为是非法的东东都可以扔进脚本里绕开验证。

感谢 Willin 大师的这个方法，让我的 HTML5 主题顺利通过了 HTML5 和 CSS3 的 W3C 验证。有个神级的重构牛人和我说过这样一句话：验证不是目的，验证只是手段，通过验证来检验自己在编写样式的时候有没有出现低级的语法错误。这句话很受用，但是为了我那对代码有着洁癖的完美主义，我还是用了这样那样的手段让自己的网站通过这样那样的验证。

但是，这样做会引起另外一个让我情何以堪的后果。因为我用的是 HTML5 的声明，已经通过了 W3C 的 HTML5 标准验证，但是在 meta 中加入那一行浏览器降级代码之后，HTML5 的 W3C 就无法通过了，就因为那一个错误！好吧，为了我的完美主义，我要绕开这个降级代码，忽悠一下 W3C 验证。

原理很简单，就是用 PHP 判断浏览器的版本，如果是 IE9 再输出那段 meta 信息，那其他浏览也就避开了这段代码，也就可以顺利通过 W3C 验证了。具体方法如下：

这样就可以让 IE9 在不打开兼容模式的前提下强制把 IE9 降级为 IE7，确保网站可以安全运行效果。但是这就又产生另外一个问题，IE9 自称是最能体现 HTML5 和 CSS3 的浏览器，所以本来网站在 IE9 下是可以有圆角有阴影的，但是这样一来，伪 IE7 下就不再有圆角和阴影这些 CSS3 的效果。没有关系，在用户体验方面，网站的功能体现肯定要比美观更重要，两者不用权衡，我选择前者。让 IE9 见他的爷爷 IE7 去吧。

文中方法来自：PHP 动态输出 X-UA-Compatible 参数 | 芒果

问题的症结在于 google reader 好像对我的日志不再更新了，导致小站的访问量和评论数直线下降，甚至一些常来的老面孔都不见了。这个问题在最近一周已经陆陆续续有好几位朋友提出，我就奇怪了，最近没折腾和 feed 有关的东西呀，也没有增加或减少插件，一切照旧，这问题从何而来，又如何解决呢？

我还是没弄清楚小站的 feed 源在 google reader 中不更新是个别现象还是普遍现象，所以在这里做个小调查，劳烦各位参与一下。调查的问题就如本文标题：请问您是通过什么方式看到这篇日志的呢？

1、google reader。这个是我最想要得知的答案，如果您是在 google reader 中阅读本文的话，那就太好了，证明小站的订阅源还算是正常运作的。

2、其他订阅而来。我早已烧制了 feedsky 的订阅，如果您是通过 feedsky 订阅的小站，那么也可能会收到邮箱的推送，或者其他非 google reader 的更新提示。

3、碰巧点击。呃……非常感谢您的参与，如果还没有订阅小站的话，可以尝试一下：feed.wange.im

下面是我对这个现象的简单的分析，做个记录：

1、http://wange.im/feed 此订阅源在各个版本的浏览器，包括 IE 和 Firefox 中都可以正常打开，没有任何错误提示。

2、我用 W3C 标准的 Feed Validation Service 检测了一下订阅源，不幸报错，错误提示为：Server returned (104, 'Connection reset by peer')，我这种非专业人士愣是没看懂这是什么意思，反正我知道没有显示 Congratulations! 就不是什么好事啦，麻烦懂行的朋友给解释一下。

3、我用 google reader 订阅了自己的博客，经过两天的测试，日志也没有如期更新，不过在 google reader 中刷新一下即可手动更新，这也不是什么正常事，总不能要求每个博友每天都手动更新一下订阅吧，那还要 google reader 做啥？

4、在我绑定的 feedsky 中，feed.wange.im 也是可以照常更新，无任何异常情况。

杯具了，郁闷了，我的 feed 源到底是正常还是不正常，who 来 help help 我～～～

一、!important (功能有限)

随着 IE7 对 !important 的支持， !important 方法现在只针对 IE6 的兼容。（注意写法，记得该声明位置需要提前。）例如：

#example {
width: 100px !important; /* IE7+FF */
width: 200px; /* IE6 */
}

二、CSS HACK 的方法（新手可以看看，高手就当路过吧）

首先需要知道的是：

所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;

例如：

#example { height:100px; } /* FF */

* html #example { height:200px; } /* IE6 */

*+html #example { height:300px; } /* IE7 */

下面的这种方法比较简单

举几个例子：

1、IE6 - IE7+FF

#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
其实这个用上面说的第一种方法也可以
#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}

2、IE6+IE7 - FF

#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
}

3、IE6+FF - IE7

#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}

4、IE6 IE7 FF 各不相同

#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
或：
#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}

需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面。

解释一下4的代码：

读代码的时候，第一行 height:100px;  大家都通用，IE6 IE7 FF 都显示100px。到了第二行*height:300px; FF不认识这个属性，IE6 IE7 都认，所以FF还显示100px，而 IE6 IE7 把第一行得到的height属性给覆盖了，都显示300px。到了第三行 _height:200px; 只有IE6认识，所以 IE6 就又覆盖了在第二行得到的 height，最终显示200px。这样，三个浏览器都有自己的height属性了，各玩各的去吧。

这样说要是你还不明白，要么你去撞墙，要么我去!不过还是你去比较好。

哦，差点忘了说了：

*+html 对 IE7 的兼容 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

三、使用IE专用的条件注释

<!--其他浏览器 -->

<link rel="stylesheet" type="text/css" href="css.css" />

<!--[if IE 7]>

<!-- 适合于IE7 -->

<link rel="stylesheet" type="text/css" href="ie7.css" />

<![endif]-->

<!--[if lte IE 6]>

<!-- 适合于IE6及以下 -->

<link rel="stylesheet" type="text/css" href="ie.css" />

<![endif]-->

貌似要编三套 css，我还没用过，先粘过来再说

IE 的 if 条件 Hack

1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
2. <!--[if IE]> 所有的IE可识别 <![endif]-->
3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->
7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->
10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->注:gt = Great Then 大于
> = > 大于号
lt = Less Then 小于
< = < 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于

四、css filter的办法（据作者称是从国外某经典网站翻译过来的说）

新建一个css样式如下：

#item {

width: 200px;

height: 200px;

background: red;

}

新建一个div,并使用前面定义的css的样式：

<div >some text here</div>

在body表现这里加入 lang 属性，中文为zh：

<body lang="en">

现在对div元素再定义一个样式：

*:lang(en) #item{

background:green !important;

}

这样做是为了用 !important 覆盖原来的 css 样式，由于:lang 选择器 ie7.0 并不支持，所以对这句话不会有任何作用，于是也达到了 ie6.0下同样的效果，但是很不幸地的是，safari 同样不支持此属性，所以需要加入以下 css 样式：

#item:empty {

background: green !important

}

:empty选择器为 css3 的规范，尽管 safari 并不支持此规范，但是还是会选择此元素，不管是否此元素存在，现在绿色会现在在除 ie 各版本以外的浏览器上。

五、FLOAT 闭合（clearing float）

网页在某些浏览器上显示错位很多时候都是因为使用了 float 浮动而没有真正闭合，这也是 div 无法自适应高度的一个原因。如果父 div 没有设 float 而其子div却设了 float 的话,父div无法包住整个子 DIV，这种情况一般出现在一个父 DIV 下包含多个子 DIV。解决办法：

1、给父 DIV 也设上 float (不要骂我，我知道是废话)

2、在所有子 DIV 后新加一个空 DIV (不推荐，有些浏览器可以看见空 DIV 产生的空隙)

比如：

.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}

<div>
<div></div>
<div></div>
<div></div>
</div>

3、万能 float 闭合

将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
代码:
<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

:after（伪对象）,设置在对象后发生的内容，通常和 content 配合使用，IE 不支持此伪对象，非 Ie  浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦。

4、overflow:auto（刚看到的，极力推荐）

只要在父 DIV 的CSS中加上 overflow:auto 就搞定。

举例：

.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}

<div>
<div></div>
<div></div>
</div>

作者原话：原理是，外围元素之所以不能很好的延伸，问题出在了 overflow 上，因为 overflow 不可见（见W3C的解释）。现在只要将给外围元素添加一个“overflow:auto”，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决IE的问题了，再加上“_height:1%”，这个问题就完全解决了。

我试了一下，其实不加"_height:1%“在IE下也行，留着吧。

六、需要注意的一些兼容细节

1, FF 下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会.

解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上IE特有标记" * "号。

2, 页面居中问题.

body {TEXT-ALIGN: center;} 在IE下足够了，但 FF 下失效。

解决办法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; "

3, 有的时候在IE6上看见一些奇怪的间隙，可我们高度明明设好了呀。

解决办法：试试在有空隙的DIV上加上"font-size:0px;"

4, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

5, 浮动IE6产生的双倍距离

#box{ float:left;
width:100px;
margin:0 0 0 100px;
}
这种情况之下IE6会产生200px的距离

解决办法：加上 display:inline，使浮动忽略

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。

解决办法：为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{
min-width: 600px;
width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7、UL和FORM标签的padding与margin

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0；

解决办法：css中首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,后面就不会为这个头疼了.

8 ,DIV浮动IE文本产生3象素的bug

下面这段是我在网上粘过来的

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>

针对上面这段代码，下面说一下我的理解：

第一、只要right定义了width属性，在FF下绝对就会两行显示
第二、两个width都定义为百分比的话，就算都为100%在IE下也会一行显示。所以上面那句所谓“这句是关键”根本没用，不加也在一行，除非你width定义的是数值才用得上。

所以说上面这段代码其实用处不大，至少在FF下不行。其实只要只定义left的width就行了，right不定义width就不管在IE还是FF 下都能成功，但这样的话父DIV BOX并没有真正的包含LEFT和RIGHT两子DIV,可以用我上面说的第5种办法解决。最简单的办法就是在RIGHT中加上float:left就 OK了，真磨叽！

9,截字省略号

.hh { -o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:
nowrapoverflow:hidden;
}
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾。技术是好技术，很多人都喜欢乱用，但注意 Firefox 并不支持

本文转自：http://www.kukala.com.cn/archives/586.html

孪生兄弟：ID 和 Class

很多刚迈入网页设计师行业的人对 CSS 中 ID 和 Class 的认识还停留在比较混乱的阶段。很多人甚至认为这两兄弟功能上是完全一样的，这就导致了他们对 ID 和 Class 的滥用。

ID 以及它的适用场合

ID 是唯一标识（identification）的意思；这是一个非常优雅和漂亮的 CSS 属性。但同时我们又很容易将它应用在错误的场合。与每个人的身份证号码必须唯一一样的道理，ID 在一个 XHTML 和 HTML 文档中的使用次数也必须唯一，即 ID 不能重复使用。重复使用 ID 标签不仅会导致你的页面无法通过 W3C 验证，而且会对 JavaScript 操作 DOM 造成负面影响。总之，ID 就像页面某个元素的身份证一样（如<div id="test"></div>），它最多仅能出现一次。

主流浏览器能够识别 HTML 和 XHTML 文档中的 ID 属性。假设我们希望在网页顶部做一个链接；当我们点击这个链接时，页面会自动滚动下滑到正文区域去；此时我们可以在正文外围元素或正文的标题元素上添加一个id="title"的属性/值，然后在链接上添加如下锚代码：

在 CSS 文档代码中，我们可以通过符号"#"来选择我们自定义的 ID 属性。

同时，JavaScript 也非常依赖 HTML 和 XHTML 中的 ID 属性，其中最重要的过程函数莫过于 getElementById() 。

Class 以及它的适用场合

与 ID 类似，Class 也可以被 JavaScript 代码所操控；但与 ID 不同的是，在同一 HTML 文档中，我们可以多次使用 Class。CSS 能够让内容与表现相分离的这种特性就得益与 Class 的强大。很多初学者知道我们能够多次将同一 Class 属性定义在不同的 HTML 元素标签上；但他们或许不知道，我们还可以将多个 Class 属性定义在同一 HTML 标签上：

第二段代码是一个完美的可通过 W3C 验证的 HTML 代码；它将两个不同的 Class 属性定义在同一 DIV 上，实现让一个段落<p>在向左浮动的同时，将其字体大小设置成文档默认字体的125%倍。

可以想象，这种组合使用 Class 的技术能够减小 CSS 文件大小并提高代码使用效率。

同样值得注意的是，我们也可以将 ID 和 Class 同时定义在某个 HTML 元素上！

那么 ID 与 Class 相比较，我该选择使用哪个？

这是一个初学网页设计的人经常面对的问题，而事实也证明是这样。很多 CSS 编写者将 ID 的用法与 Class 的用法相混淆，这导致他们在同一 HTML 页面上多次使用同一 ID 属性。

虽然这种用法或许并不影响页面的外观（浏览器能正常解析），但却给页面的规范性和日后的网页维护留下了隐患。说它不规范是因为它没有遵循 W3C 推荐的 CSS 使用规范，这样的代码无法通过 W3C 认证，而且不能保证以后的浏览器能够正常的进行解析。说它给日后的网页维护留下隐患是因为正如我们上面所谈到的，Class 的大量使用一方面能够减少 CSS 文件大小，进而加快网页速度；另一方面通过 Class 的组合使用提高 CSS 编程效率，这主要是因为 Class 能够重复使用，无需像 ID 那样，增加一个 ID，必需在对应的 CSS 代码中增加对属性的定义。

结合上面的描述，我推荐给大家如下的规范作为 CSS 的“游戏规则”：尽可能多的使用 Class 定义网页的样式；仅在与 JavaScript 操作相关的 HTML 元素上使用 ID 属性。

Tips：当我们看到一个 ID 时，会意识到有 JavaScript 可能在操作这个元素（方便 JS 代码查错）。

总结

无论怎样，是选择 ID 还是选择 Class？这一切都取决于你。希望本文对大家认识 ID 和 Class 有一定的帮助作用。

本文转自：http://www.docin.com/p-8097684.html

这里提供两种方案使 WordPress 评论者的链接在新窗口打开。

方法一：用 rel="external" 实现。

1、将以下代码另存为 external.js 文件。

2、然后将 external.js 文件上传到主题根目录下，并用以下方式调用。

方法二：用 target="_blank" 实现。（转自 荒野无灯，原址请见http://www.hacklog.cn/php/wordpress-comment-author-link-open-in-new-window.html）

1、打开/wp-includes/comment-template.php，查找“function get_comment_author_link”。

2、在第148行（Wordpress 2.8.4，其他版本可参照）处添加 target='_blank'，如下：

我现在用的是方法二，荒野无灯的方法，效果可以点击下面的留言中评论者链接。

CSS 3.0 本就是建立在 CSS 2.1 的基础之上的，因为之前已经通过了 W3C CSS v2.1的校验，今天再去验证 W3C CSS v3.0，几乎不费吹灰之力就通过了。我只是在原来的 style.css 中的 h2 标签加了一个 text-shadow 的 CSS 3.0 的属性值而已，其他都没改动，用 Firefox 或者 Chrome 浏览器的朋友应该可以一睹这一属性的芳容，所有的日志标题都有了文字阴影的效果，看起来挺酷的吧。还在用 IE 浏览器的童鞋就没这福份了，因为 IE 暂不支持这一属性。

text-shadow 属性我早有耳闻，但是一直以来都没有看到过效果，也就没有直观的感受，也懒得去试验这个属性。今天正巧在Bronco的博客上看到博主使用的 text-shadow 吸引了我，firebug 了一下就挖过来了，其实用法很简单，转身就立马给自己的博客标题也加上了，看上去还不错，呵呵。

为了样式表中这唯一一个 CSS 3.0 的属性，我还特地去做了 W3C CSS v3.0 校验，果然顺利通过，和上次一样，贴图作个留念：

网站通过W3C标准的条件需要注意以下几个问题：

1、XHTML 1.0文件类别宣告的正确写法 (不可小写)

A:过度标准（Transitional）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

B:框架标准（Frameset）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

C:严格标准（Strict）

包含以上须注意的问题,还有其他更严格的标准
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2、头文件问题

所有的网页头文件都一律都改为 W3C 标准形式，写法如下：

<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="content-language" content="zh-cn" />
<meta name="keywords" content="..." />
<meta name="description" content="..."/>
<title>...</title>
</head>

3、不允许使用target="_blank"

在HTML4.01可以使用target="_blank"，但 XHTML1.0 是不被允许的。

比如原来这样写的代码：<a href="document.html" target="_blank"> 打开一个新窗口</a>

现在需要写成这样：<a href="document.html" rel="external">打开一个新窗口</a>

这是符合 strict 标准的方法。当然还必须配合一个 javascript 才有效。

javascript 完整的代码 JS 如下:

function externallinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank"; }
}
window.onload = externallinks;

然后把它保存成一个.js 文件(比如open.js)，再通过外部联接方法调用：

<script type="text/javascript" src="external.js"></script>

4、XHTML 1.0 要求所有的标识必须关闭，所有没有成对的空标识必须以 /> 结尾。<p></p>和<a href="index.html"></a>这就是成对。

错误 <br> <hr>正确 <br /> <hr />

错误 <input type="text" name="name">正确 <input type="text" name="name" />

错误 <meta ...>正确 <meta ... />

错误 <link rel="stylesheet" type="text/css" href="style.css">正确 <link rel="stylesheet" type="text/css" href="style.css" />

错误 <img src="bg.gif" border="0" alt="说明文字">正确 <img src="bg.gif" border="0" alt="说明文字" /> 

5、所有标识元素名称都使用小写

错误 <HTML> <TITLE> <HEAD> <BODY>正确 <html> <title> <head> <body>

错误 <IMG SRC="BG.GIF" BORDER="0" ALT="说明文字">正确 <img src="bg.gif" border="0" alt="说明文字" />
错误 <UL><LI></LI></UL>正确 <ul><li></li></ul>

以上只是举例，是所有标签元素名称都必须是小写 

6、同一个 id 选择器不可重复使用一个网页中 id="xx" 同一个选择器不能重复使用，若需要重复请用 class="xx"

7、W3C标准标识必须是成对的 

<p> </p> <span></span> <div></div>

8、正确的标识顺序 

错误 <b><i>文字</b></i>
正确 <b><i>文字</i></b>

9、JS 写法

Javascript 我们通常会写为：错误 <script language="javascript">

W3C标准必须为程式指定类型type=text/javascript,所以要写为：正确 <script type="text/javascript">
或者 <script language="javascript" type="text/javascript">

载入外部.js：

正确 <script type="text/javascript" src="script.js"></script>

10、绝对不可省略双引号或单引号

错误 style=font-size:9pt正确 style="font-size:9pt"

错误 <img src=bg.gif width=140 height=30 alt=text />正确 <img src="bg.gif" width="140" height="30" alt="text" />

错误 <a href=home>text</a>正确 <a href="home">text</a>

11、W3C 标准规定图片标识加上文字说明 alt="图片说明"

错误 <img src="bg.gif" height="50" border="0" />正确 <img src="bg.gif" height="50" border="0" alt="说明文字" />

12、背景音乐不允许使用 bgsound 标签，不过我们依然可以用 JavaScript 来解决这个问题。js 代码如下：

<!-- Begin
var MSIE=navigator.userAgent.indexOf("MSIE");
var NETS=navigator.userAgent.indexOf("Netscape");
var OPER=navigator.userAgent.indexOf("Opera");
if((MSIE>-1) || (OPER>-1)) {
document.write("<BGSOUND SRC=背景音乐地址 LOOP=INFINITE>");
} else {
document.write("<EMBED SRC=背景音乐地址 AUTOSTART=TRUE ");
document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>");
}
// end -->然后保存成.js文件(比如background_music.js)，通过外部联接方法调用它

13、<embed>标识的争议

<embed>是Netscape的私有标识，W3C 标准从 HTML3.2  HTML 4.01 到 XHTML 1.0 中都没有这个标识，所以使用<embed>的页面是不能通过标准测试。

W3C标准推荐使用 <object> 标识,用 <object> 插入 flash 影片的代码可以写为:

<object type="application/x-shockwave-flash" data="index.swf" width="400" height="200">
<param name="movie" value="index.swf" />
</object>

但这样的写法可能 IE5/IE6 Win 浏览器版本会出现问题。<embed>标识因为广大的受到运用，不再标准范围引起很大的争议，想要解决这个问题，只能等IE浏览器对 <object> 有更好的支持或者 W3C 愿意收录 <embed> 标识。

14、 W3C标准规定不允许使用框架标签<IFRAME>

用 JavaScript 解决问题了。javascript 完整的代码如下：

function ifr(url,w,h){document.write(’<iframe id="ifr" name="ifr" width="’+w+’" height="’+h+’" border="0" frameborder="0" scrolling="no" src="’+url+’"></iframe>’);} 然后把它保存成一个.js文件(比如iframe.js)，然后通过外部联接方法调用：<script type="text/javascript" src="ifr.js"></script> 在你需要插入框架的地方写以下代码即可：<script type="text/javascript">ifr(’需插入的网页地址’,’567’,’485’);</script>  函数ifr()使用说明：ifr(’这里写地址’,’这里写宽度’,’这里写长度’,)

15、google广告问题

google 广告的代码是不符合 W3C 标准的，只好又把它转成 JS 调用，但 GOOGLE 政策里是写着不允许修改代码的，关于这点只能等待看看在以后会有什么修改了。JS文件(google.js)代码如下：

document.writeln("<script type="text/javascript"><!--");
document.writeln("google_ad_client = "pub-0538745384335317";");
document.writeln("google_ad_width = 125;");
document.writeln("google_ad_height = 125;");
document.writeln("google_ad_format = "125x125_as";");
document.writeln("google_ad_type = "text_image";");
document.writeln("//2007-06-29: http://www.100byte.com/");
document.writeln("google_ad_channel = "4751988107";");
document.writeln("google_color_border = "1a1a1a";");
document.writeln("google_color_bg = "1a1a1a";");
document.writeln("google_color_link = "d0eb6a";");
document.writeln("google_color_text = "ffffff";");
document.writeln("google_color_url = "8ad459";");
document.writeln("google_ui_features = "rc:6";");
document.writeln("//-->");
document.writeln("</script>");
document.writeln("<script type="text/javascript"");
document.writeln(" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">");
document.writeln("</script>") 

各位可以按照自己的情况修改，网上也有许多把 HTML 代码转为 JS 代码的地方。最后在需要挂广告的地方放入代码 <script type="text/javascript" src="google.js"></script>

16、W3C 标准注解文字不可包含--符号

错误 <!-- index--box -->正确 <!-- indexbox -->

小贴士：在样式表的注释中注意尽量避免用中文

17、正确使用 CSS 样式表

样式表放在文件本身的时候，一定要放在<head></head>之间

<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--
body{font-size:9pt;}
-->
</style> 

注意：
错误 <style>正确 <style type="text/css">

18、使用表格常犯的错误

在做表格通常会指定宽与高，例如:<table border="1" width="300" height="100">
<tr><td> 内容 </td></tr>
</table> 这样做是没有办法通过,可使用CSS来控制标识元素的高度.table{ height:100px; }<table><tr><td> TEXT </td></tr> </table> 但若使用太多表格,在CSS一一指定不同高,也不是好方法其实很简单将高度 height 属性指定在储存格就可以了通过测试
<table border="0" width="300"> <tr><td height="100"> TEXT </td></tr> </table> 但这不是W3C标准,建议多使用div代替不必要的 table

19、非标识一部分的符号以编码表示(窗体内包含以下符号也必须用编码表示)

< 以 &lt; 表示
> 以 &gt; 表示
& 以 &amp; 表示
程序中的连结 & 也要改用 &amp;
错误 <a href="foo.cgi?chapter=1&section=2">
正确 <a href="foo.cgi?chapter=1&amp;section=2">

20、所有属性都必须有值

XHTML1.0 规定所有属性都必须有值, 若没有就必须重复属性作为值

错误 <input type="radio" value="v1" checked name="s1" />
正确 <input type="radio" value="v1" checked="checked" name="s1" />
错误 <option selected>S1</option>
正确 <option selected="selected">S1</option>
错误 <td nowrap>
正确 <td nowrap="nowrap">

本文转自：http://www.yeskp.cn/Newcontents/34.html