昨天我度过了自己难忘的25岁的生日，对于我而言，今年非比寻常。而对于浏览器世界也是如此——这个月我看了数份浏览器报告，欣慰地看到了Chrome的高歌猛进，Firefox的老当益壮，IE9的势如破竹，当然最最欣慰的，莫过于看到IE6/7的垂死挣扎，恍惚间幻觉三足鼎立之势已成。不过转念一看国内的情形却又让人沮丧，各种壳浏览器横行，前端革新之路仍相当遥远漫长。
这里，我预告了自己的年度作品，作为告别礼的序幕。
IE Alpha Filter Bug: #02050a色值像素透明化
IE的透明滤镜bug算的上是IE为数众多bug里的不起眼的角色，直到之前我确实的遇到了它，我想我根本不会去关注非标准的IE滤镜带来的各种问题。这个bug的表现非常的直观，filter透明度渐变后，图片的某些点变成了透明的了！比如如果这个时候背景是白的，就是白色的噪点。这在banner切换时表现的非常明显——渐变是产生噪点，渐变完成后噪点也会一直残留：
这个Bug在IE6 7 8里都存在，实际上只要使用了透明滤镜就会表现出来，并且非常有趣的是，它只对一种颜色值有反应：#02050a
博客放弃兼容IE6以及IE7
就在几天前，WordPress宣布在最近一次的更新里不在支持IE6，这一举措加速了IE6的死亡。虽然我的博客早已经在顶部挂起公告，希望IE6和IE7的用户能升级他们的浏览器，但其实仍然安分地继续做着尽可能的IE6兼容。不过这次真的打算放弃了，既然连wordpress都宣布了不支持IE6，维护者也不应该拘泥下去，尽管我的wp版本始终是2.9.3…
IE6是伟大的，2001年8月发布，到现在10年时间，寿命之长恐怕真的是要空前绝后了。虽然web开发者对IE6深恶痛绝，但同时却也不能忘记IE6给开发者带来的价值——它曾经一度提高了web开发的门槛，虽然幅度有限。所以前端对IE6的感情是复杂的，失去了眼中钉的同时，也失去了一个挑战的舞台——IE6总能给我们惊喜，不管那惊喜是不是我们想要的——当然通常不是。
国内的IE6仍然是大多数，虽然系统升迁win7导致IE8也不少，但若要国内的网站放弃IE6远远还不够——甚至我自己的系统里就是IE6。根据5月份sitepoint的浏览器市场份额报告，IE6的比例已经下降到了4.37%，不过在国内恐怕在这后面加个数字都不止。其他IE版本里，IE7占9.78%，IE8占30.20%，IE9占0.75%，可见正常情况IE8才是最为流行的IE版本。
我的网站IE占比34.57%，其中IE6占比23.22%，也就是说，我的网站IE6占比7.73%，其实比例也已经相当低。
IE6相关资料归档
虽然微弱，但IE6确实正在慢慢地死去。针对IE6的知识同样渐渐过时。针对IE6的知识同样渐渐过时。不过这也是因为自己整天做的是针对国外的网站，这种感觉才越发强烈。
本文会在2011年内持续更新。我会把我知道的各种零碎的关于IE6的东西整理出来。这些东西都将会随着IE6消亡。这些东西都将会随着IE6消亡，慢慢淡出前端工作者的视线，但是它们存在过，并且我列举的都是陪着我一路走过来的资料，我从这些地方学到了很多。
今后的一年里我要穷举出自己经历的IE6，一个我眼中的IE6。同时，往前看，一个新的IE6正在前方等着我们:)
word-wrap导致的li额外间隙
有些问题可能很少有机会遇到，前段时间我就在工作中遇到一个由word-wrap引起的兼容问题。因为当 word-wrap:break-word 这种 rule被加到了全局CSS里后，出现问题就显得非常隐蔽，所以排查了不少时间才找到原因。不过这也不算大问题，因为造成这种情况是多种因素的巧合。
新的wordpress主题
自从尝试做了swordis主题之后，对wordpress的主题也有所认识。于是决定做一个自己的主题。并且这次和上次不同，是很认真地要做完的。名字还没有想好，但是目标很明确：
- 没有图片的纯CSS主题。意味着线条和空间是首要设计元素。
- 必须过XHTML1.1以及CSS3验证。CSS3阴影和变换等，由于有前缀，所以即使使用也会暂时注释掉。
- 通过主题单元测试( Theme Unit Test )。这是一组严酷的内容兼容性检测。
- 流体布局。右边栏，因为我调查下来，比起侧边栏在左面，似乎更多人习惯在右面。
- 弹性em值。
- 兼容所有主流浏览器，包括IE6在内。
- 以及良好的可访问性和自适应性。
这些天从睁开眼睛开始我就在思考怎么把这个新的主题写好。主要考虑的是线条和颜色的虚实，实际上和篆刻类似，如何把自己其他方面的知识应用进去，就是这次的主要问题。
最大的挑战应该还是来自IE6的，因为这次不能写违规的hack，也不能用IE的私有属性。其实早该如此，IE6虽然仍旧苟延残喘，但是终究会被历史的洪流冲走的，我坚信这IE8成为下一个IE6的时代的来临。
前端工作类似一道工艺，相同的设计，工艺不同，价值也会天差地远。
上次试作的主题，设计用了半天，HTML化也是半天，总共才一天时间，加上才第一次做主题，自然漏洞百出。虽然大的问题暂时也没有，但是代码级别差距很大。这次截然不同，纯CSS，没有设计直接写，但是style.css我已经写了2天有余，到现在也仅仅只是有一个框架。期间数易其稿，多次改动整个布局。
现在就是主题单元测试的内容，相当周到。有多层次的页面，有混合布局、超长、超短、甚至是无标题或者无内容的文章，也有超多分类、标签的极限测试，还有何种视频嵌入，总之是应有尽有。
浏览器模式
关于浏览器模式，一直以来的理解是这样的：浏览器厂商出于那些老站点的向后兼容的目的，创建了两种模式。即标准模式(standards mode)和怪异模式(quirks mode)。在标准模式里，浏览器按照规范渲染页面，而在怪异模式里，浏览器以一种老式的或者是模拟老式浏览器的渲染方式表现页面。
这些并没有错，但是还不够全面和深入。当我回顾《CSS Mastery》的时候，也让我想起了很多渐渐淡忘的、并且也可能是无关紧要的其他碎片。
比如，两种模式最大的差异的例子就是IE盒模型的解释。IE如此，Opera 7也是如此。再比如，Mozilla和Safari的第三种“准标准模式(almost standards mode)”，只是在处理表格的方式上有些细微的差异，其他与标准模式无异。等等。
一直以来，确保DOCTYPE的正确也是非常重要的事。浏览器根据DOCTYPE是否存在以及是何种DOCTYPE来确定渲染方式。如果总结如表，应该是这个样子。
| DOCTYPE | MODE |
|---|---|
| XHML + 形式完整DOCTYPE | 标准模式 |
| HTML 4.01 + strict DTD | 标准模式 |
| DOCTYPE包含URL和transitional DTD | 标准模式 |
| DOCTYPE只包含transitional DTD | 怪异模式 |
| DOCTYPE不存在或形式不完整 | 怪异模式 |
这张由我根据《CSS Mastery》一书所列出的表并不怎么完整，Alastair Campbell有一个更加全面的关于IE浏览器模式和DOCTYPE的表格。
另外一个可能有点过时的，是Eric Meyer关于DOCTYPE switching的表格。多年之后我再去看这个链接的时候，发觉它居然还在:)
而现在，我更喜欢看QuirksMode上的资料。
跨浏览器边框探索
虽然起了一个看似很牛逼的题目，但本文可以说完全是蛋疼的人的一种消遣~通常开发人员都有自己的放松方式。写文章用不了太久，倒是图材准备了老半天。谨以此文，让我们来消遣下各个浏览器对于边框的理解方式。
参与此次测试的浏览器包括windows下的几乎全部：ie6，ie7，ie8，ie9preview，chrome，firefox，safari，opera，seamonkey。各版本皆为网上下载的最新版。并且由于这次的测试里，IE678的表现一致，firefox和seamonkey又是裙带，所以合并作IE8和firefox。
10个糟糕的IE Bug及其修复
国外有很多优秀的文章可以用来学习，我决定花些时间翻译。我并不知道这篇文章有没有人翻译过，原文名 10 Awful IE Bugs and Fixes，我希望能有更多人能看到这些优秀的文章。外国人很幽默，所以我也就全文翻了。
———-以下为译文———-
我列举了10个常见的IE bug和解决方法。我相信这将能够帮助你减少调试IE布局不一致时花掉的时间。
作者：kevin
简介
在处理IE方面每个人都有他们自己的故事。作为一个开发者我不得不面对大量的IE的古里古怪的问题并且有的时候你只是想用头撞墙。但是随着时间的推移，我们慢慢吃一堑长一智（有些时候那不是我们的错，是IE的错！）并且开始接受和理解IE的怪异行为。我们不得不这样因为仍然有数量可观的IE6用户。最好的做法是一开始就不断的从不同的浏览器测试你的网站。从一开始就解决布局问题要比在数千行html和css代码之后容易的多。
HTML5 新标签 ruby
HTML5也许真的离我们不是很遥远。今天匆匆浏览了一下3月10日版本的关于HTML5和HTML4区别的W3C的草案: http://dev.w3.org/html5/html4-differences/#changed-elements，就更加觉得仿佛就在眼前一般。在新标签里看到了ruby的名字突然就联想到了ruby语言。虽然这个ruby和ROR没什么关系，但引起了我想要去了解的兴趣。
ruby元素是用来标记称之为 ruby 注释的。ruby 注释是用ruby字符标示在汉字等东亚字符的上方或者右方用来标示的拼音的那部分。就像小时候读课文时，标记在文字上的拼音，就是ruby字符，或者称之为ruby(rubi)。