根据Browserscope提供的资料，整理了一下各浏览器的区别，以作备忘：
原文：http://css-tricks.com/efficiently-rendering-css/
中文：http://www.vfresh.org/w3c/1034
只做重点翻译.
浏览器解析CSS的时候是从右至左，例如：ul > li a[title="home"]这个选择器中，浏览器首先解析是a[title="home"]，这部分也被称为“选择器主键”，即最终将选择的元素。
从高效到低效，有四种选择符：ID、类、标签、通配符。
#main-navigation { } /* ID (最快的) */ body.home #page-wrap { } /* ID */ .main-navigation { } /* 类 */ ul li a.current { } /* 类 * ul { } /* 标签 */ ul li a { } /* 标签 */ * { } /* 通配符(最慢的) */ #content [title='home'] /* 通配符 */
结合上面说的“浏览器从右至左解析”，下面的这个选择器就不是那么高效了：
#main-nav > li { } /* 低于预计的效率 */
这让人非常的疑惑，我们原以为浏览器会先匹配最高效的ID，然后再去找那该死的子元素li。但事实是更该死的浏览器会先去找低效的li。
绝对不要这么用：
ul#main-navigation { }
ID是唯一的，所以没必要再用个标签，脱裤子放屁的事咱ITer不能做。
同样的，对于类(class)也应该尽量避免，除非你想实现同一类名根据标签来做不同的表现。
David Hyatt曾说过：
CSS中最耗资源的就是包含选择器(Descendant Selectors)，特别是这些选择器是标签或通配符时，资源开销会大的恐怖。
也就是说，这个选择器是相当的低效：
html body ul li a { }
墙内音：fuuuuuuck ie6
我不确定这一条的实用性，因为在你的css里面出现着一堆一堆的无效的选择器，好像呃，非常的诡异。但我们还是得明白：当浏览器从右至左解析选择器的时候，一旦无法匹配就会立即停止解析。
例如这个选择器：
#main-navigation li a { font-family: Georgia, Serif; }
上面这段代码只是用来申明字体类型(font-family)，不必指定如此详细(复杂)的选择器（除非你是想覆盖<重设>font-family）
可以通过继承的方式使之更高效：
#main-navigation { font-family: Georgia, Serif; }
全文主要内容译完
作者还提醒大家：
不要为了优化css选择器效率而损失css的可维护性、语义化，这样就得不偿失了。本文只是希望你能认识到，css可以写的更好更漂亮。
另外，css选择器在一些JavaScript库中同样有用到，这些概念也同样适用；ID最高效，复杂、包含选择器这类是低效的。
原文：How to use HTML5 in your client work right now
中文：如何在目前这个浏览器群雄割据的时期用上HTML5
请尊重版权，转载请注明来源！
“可否用HTML5来做这个站？”两周前一个客户这样问我，我当然很乐意这么做。当时的情况是这样的：
我：
如果你们没有问题的话，我们将使用HTML5重构整个站点。但我想问下：你们站点有多少IE用户是没有开启javascript的？占多少比率?
客户：
嗯，我真的不清楚。但我不想损失这部分用户，所以我想还是不要用HTML5了。
我：
哇！别这么早下决定，我们可以只用HTML5来搭建个别之处，而非全部，这样如何？
客户：
棒极了！就这样做。
先看示例：例一（请用firefox3.x、chrome4等支持css3的浏览器查看）
关键的css是这一句：
.post:target { display:block; position:fixed; top:50%; left:50%; margin:-80px 0 0 -260px; }
例一向大家展示了css3中:target的神奇应用，但不足的是当有纵向滚动条时，会有页面跳转的动作；当然了，也必须有跳转动作:target才会运作。
如果需要取消页面跳转，那得用上JavaScript了。
但是我们可以换一种简单的交互方式：查看例二
这就是css3的魅力，通过css就能实现不错的用户交互体验，当然配合JavaScript会更出色！
在此抛砖引玉~
inline-block是个好东西，谁用都知道。
但兼容是个问题（仅Opera、Safari、chrome、firefox3.x能完美呈现）
IE下可以通过触发hasLayout来模拟inline-block
纠正我一直以来的认知错误“ie不支持inline-block”：
IE5.5就已经支持inline-block了，可参考display Property的Remarks部分；但IE7及以下版本下给block元素设定inline-block需要使用*display:inline;*zoom:1;来修正。
麻烦的是firefox2.x
虽然有-moz-inline-block和-moz-inline-stack来模拟，但都或多或少有些问题
firefox2.x中使用-moz-inline-stack使用可能遇到的问题：（垂直居中）
可以使用-moz-box-align -moz-box-pack这2个firefox私类来稍作修正，但始终无法完美模拟。
在一次偶然中，我发现firefox还提供有另一个私有属性display:-moz-box;，它会根据-moz-box-orient的值来水平或垂直显示其子元素。
因此给-moz-inline-block元素的父级定义display:-moz-box;就可完美模拟inline-block了！（-moz-box-orient默认值为水平显示）
但因为-moz-box的定义，这个方法不适合有其他类型子元素的容器使用。
主要样式：
.link-ib,.link-ib span { display:inline-block; height:40px; line-height:40px; background:#FFCB06 url(btn.png) no-repeat; *display:inline; /** 修正ie 无法给block元素设定inline-block **/ *zoom:1; /** 触发ie中inline元素的hasLayout **/ } .link-ib {display:-moz-box;} /** for firefox2.x **/ .link-ib span {display:-moz-inline-block;} /** for firefox2.x **/ .link-ib { padding-left:20px; color:#654005; font-size:16px; text-decoration:none; background-position:0 0; } .link-ib span { cursor:pointer; /** 修正IE **/ padding-right:20px; background-position:100% 0; } .link-ib:hover { color:#000; background-position:0 -40px; } .link-ib:hover span { background-position:100% -40px; }
去年就想将IE的bug系统地整理下，但一直都忙于工作、学习没有完成，看到这篇E文后，我毫不犹豫的放下了手中的工作将之翻译出来。
由于是第一次译文，所以错误在所难免，欢迎大家批评指正。
原文：Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
翻译：http://www.vfresh.org/w3c/727(译文对原文进行了补充)
对IE6最好的策略就是不去兼容它。
好吧，我知道你的难处，你不得不去兼容IE6这个狗血的浏览器，因此不得不在兼容IE6上花费很多时间。对此，我颇有同感，来让我来帮助你吧。
我不会象许多文章那样让你去抵制IE6，这并不会帮助到你(迫不得已时)去兼容IE6；因为IE6依旧占有一定的市场份额，你无法放弃IE6。本文将帮助你来解决这个难题。
我查阅过很多资料来摘录这些解决方案（有些是我自己提供的），现在我做成手册提供给大家搞定IE6这个家伙。我尽可能的提供了最优解决方案而不是一些hacks，并且提供了一些相关的资料。如果你发现有更好的方法或者本文有错误，请联系我。
经常会碰到类似于这样的两栏（或多栏），中间有条分隔线。
由于左右两侧内容不固定，简单的使用border只能实现单侧的分隔线。
可以给左栏定义border-right，右栏定义border-left；
然后再给左栏设置margin-right:-1px;或者右栏设置margin-left:-1px;，使他们的border重叠，这样就可以实现完美的分隔线啦！
可运行示例查看效果：
<style type="text/css" > * {padding:0;margin:0;} body {font-size:12px;line-height:1.5em;} a {color:#FFFFBF;text-decoration:none;} a:hover {color:#FFFF77;text-decoration:underline;} .wrap {width:350px;padding:10px;margin:30px auto;background: #132E35;color:#fff;overflow:hidden;zoom:1;-webkit-border-radius: 10px;-moz-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px;box-shadow:0 0 3px #000000, 0 0 4px #000000, 0 0 3px #000000;-moz-box-shadow:0 0 3px #000000, 0 0 4px #000000, 0 0 3px #000000;-webkit-box-shadow:0 0 3px #000000, 0 0 4px #000000, 0 0 3px #000000;-khtml-box-shadow:0 0 3px #000000, 0 0 4px #000000, 0 0 3px #000000;} .wrap h2 {font-size:14px;margin-bottom:5px;} .wrap .pic {float:left;width:100px;padding-right:8px;margin-right:-1px;border-right:solid #425555 1px;} .wrap .pic img {display:block;} .wrap .content {float:left;width:233px;border-left:solid #425555 1px;text-indent:2em;padding-left:8px;color: #DCE4E4;} </style> <div class="wrap"> <h2><a href="http://www.vfresh.org/" title="">粉丝站预测《暗黑3》第五职业 盗贼或将回归</a></h2> <div class="pic"> <img src="http://www.vfresh.org/wp-content/uploads/2010/01/d3.png" alt="" title="" /> </div> <div class="content"> 两个粉丝站的预测结果可算不谋而合，如果不出意料的话，暗黑3的第五职业可能是射手与盗贼的结合体。 <a href="http://www.vfresh.org/" title="">[详细内容]</a> </div> </div>
注意：此法在非IE中无法实现dashed/dotted等非直线(solid)的分隔线，因为这些虚线无法完美地重叠，而且各个浏览器的错位方式都不一样，所以不建议在这些浏览器中使用这个方法操作虚线。但IE浏览器中是可以完美重叠的。
一般我们显示艺术性文字是使用图片替换文字的方法
绝大部分网站都是使用直接隐藏掉文字的方式：
<style> .logo{ display:block; height:31px; width:30px; text-indent:-999px; background:#464646 url(http://www.vfresh.org/wp-admin/images/wp-logo.gif) no-repeat; } </style> <a href="#" class="logo">vfresh.org</a>
这样，我们成功的隐藏了文字，并且在css未能加载时能正常显示文字。
但是在成功加载css后，如未能成功加载图片或者图片加载得很慢，这个部分都会显示一片空白。
为了避免这个问题，我们可以使用一个空白标签（如）浮动于文字上层并填充图片
同时我们可以对文字层格式化，使之接近于图片的显示效果。
这样在图片没有显示出来之前，都由文字这个强力后备顶着！~
<style> .christmas { position:relative; width:304px; height:149px; line-height:25px; background:#1E3151; color:#CCE8F3; font-size:14px; } .christmas span { position:absolute; top:0; left:0; display:block; height:100%; width:100%; background:url(http://www.vfresh.org/wp-content/uploads/2009/12/bestwish.jpg) no-repeat; } </style> <div class="christmas"> Best Wishes for Christmas & the New Year! <span></span> </div>
但这样做的缺点是：
1.需要一个填充图片的标签，需要更多的选择器来进行样式控制。
2.图片加载完成时替换掉文字的视野时，会有所突尤。
但为了让用户更快的预览到信息，这点缺点，在必要的时候确是大可忽略的，特别是游戏站点。
新版本v1.1请见：http://www.vfresh.org/w3c/914
今早看到前端观察翻译的《Zen Coding: 一种快速编写HTML/CSS代码的方法》
对这种编辑方式很感兴趣，但自己熟知的EditPlus并未有此插件
遂研究了下，做出了简单功能
目前只能通过选取片段来生成html
找不到EditPlus的接口信息….似乎没有接口.
设置方式：
设置参数文本：
命令：WScript.exe "D:\editPlus\app\zencoding\zencoding.wsf"
（红色下划线部分为插件放置路径）
参数：$(CurLine)||$(CurSel)
初始目录：$(FileDir)
勾选运行为文本过滤器：替换
vfresh is viczen's blog.Powered by Wordpress since 2007.
粤ICP备09090641号
