就本站现在用的这个主题来说，已经用上了这个 WordPress 的语音搜索功能，有图为证。

可以看到右上角的站内搜索框比以往多了一个小话筒的图标，点击之后就会弹出一个小的提示框，此时可以清晰地说出你需要搜索的关键词，截图中是我语音说的 "wordpress" 这个关键词，有兴趣的朋友可以拿本站做测试。

但是，这个功能暂时只能在 Chrome 11 版本以上的谷歌浏览器上看到这个效果。因为这是在 input 输入框里添加 x-webkit-speech 属性来实现的，从这个属性的命名可以看出，webkit，这是一个 webkit 核心浏览器的私有属性，所以你可以切换到 Chrome 浏览器来测试本功能。

x-webkit-speech 是 html5 的 speech 功能的 API，Google 的 Chrome 在对 HTML5、CSS3 的新技术标准的支持上特别积极，所以很有幸，我们可以在 Chrome 上体现各种新奇的功能特性。实现的方法也特别简单，在你的搜索输入框的 input 标签里添加 x-webkit-speech 属性即可，如下：

废话很多，但是代码却很简单，赶紧试试呗~

昨天无聊的时候又去关注了一下这个博客，发现它的所有站外链接后都会显示一个“2”，其实这个问题很早就发现了，只是一直没有深究，昨天实在被这个“2”搞迷糊了，就想深究一下下，难道 CSS 森林是想要表达所有外链都很2这个意思吗？不会吧。。。在同事丁锅锅的提点下，终于揭开了这个“2”的神秘面纱。

原来这个“2”只是在 Firefox 下的效果，在 Chrome、IE8 等浏览器下就不是表现为“2”了，而是新窗口打开的一个小图标，确切来说，那并不是一个图标，而是一个用特别字体显示出来的文字图案。效果如图：

情不自禁地翻了一下它的 CSS 样式表，发现它的数字“2”用的是 Webdings 字体，难道这个字体可以让数字转换成奇妙的图案吗？顺着这个思路 Google 了一下，不 G 不知道，一 G 还真是如此。Webdings 字体转换成一些有趣的类似于小图标的符号，这样就可以省去了切图的麻烦，但是让我没想到的是 CSS 森林用的渐进增强居然把 Firefox 也给抛弃了，更奇妙的是，IE 居然反常地可以支持这个字体的转化。

最后，把它做成了一个 DEMO，用非 Firefox 和 Opera 的朋友可以看一下。神奇吧？不相信你的眼睛，你可以复制下来看看，其实你复制的就是一串数字。

IE9 背负的期望是它的前辈们（IE6、7、8）欠下的债，所以 IE9 是来还债的。IE 给网页开发者造成的麻烦已经不在少数，什么稀奇古怪的 BUG 在 IE 身上发生都会感觉不足为奇。或许 IE 自知罪孽深重，仅仅一个 IE9 已经无法洗清其前世的过错，于是索性和前世一刀两断，微软 IE 部门经理迪安·哈查莫维奇（Dean Hachamovitch）就曾经表示过 IE9 不会支持 Windows XP 系统，是的，就连刚发布的 IE9 正式版也不支持 XP 操作系统，这是何等的杯具呀。

我们知道，微软官方前些日子刚刚推出 IE6 的倒计时网站，而如今的 IE9 又不支持 XP，不用我说，你也应该想到这两者之前的联系了吧。微软正在有预谋地进行着他的 Kill IE6 计划，虽然可能难度比较大（至少在我朝是比较难的），但是微软总算在朝正确的、积极的、标准的方向前进着。

事实上，微软也是需要适时的低下它高贵的头颅了，在当今各浏览器盛行的年代，早已不是微软一家独大，也不是以他的标准说了算的，不要以为有 bug 很拽，也不要以为不兼容 HTML5、CSS3 很牛叉，总有一天是会被用户淘汰的，IE9 的诞生，虽然不能马上让 IE6 灭亡，但可以极大的促进其他几款浏览器的迅速发展、齐头并进。连 IE 都杀入了标准浏览器的行列（从目前来看，是更符合 W3C 标准的浏览器），其他几款 Firefox、Safari、Opera、Chrome 这样标准浏览器应该可以感到一些压力了吧。

话又说回来了，我朝 XP 的用户那么多，有多少 XP，就有多少 IE6，而 IE9 又不支持 XP 系统，让这些 XP 的用户情何以堪？！有多少用户会为了体验 IE9 而放弃 XP，重新安装一个 Win7？微软，你这是要推广 IE9 呢？还是想要推广 Win7 呢？难道又要和 XP 绑定 IE6 一样，让 Win7 绑定 IE9 吗？给用户一个选择的空间吧，不希望在若干年后，Win7 遍地开花的时候，IE9 又像如今的 IE6 一样成为下一个互联网时代的杯具，到时候，你让 Win7 情何以堪，你让 Win7 的用户情何以堪？

我们知道，像 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 参数 | 芒果

如果你不服气，很正常，要一下子改掉这个坏习惯没有说服力的证据很难让人信服。还是先来看一个 DEMO 吧，一定要用 IE 浏览器看哟，因为在 IE 浏览器菜单中的查看-文字大小有“最大、较大、中、较小、最小”五个层次选项可以调节，看到什么变化了吗？是的，用 px 作为单位的那行文字无论怎么调节都是固定不变的，用 em 作为单位的那行文字就可以随着浏览器对字体大小控制而变化。这就是两者的区别！

继续刨根问底一下，那么在写样式的时候，我们怎么控制 em 和 px 呢？换句话说，em 和 px 的比例关系是什么呢？已经有前辈找到了答案，在未经 reset 的浏览器都符合以下比例：16px = 1em，也就是说那么 10px = 0.625em。如此一来，我们可以在 body 中添加 font-size:62.5%; 于是乎，1em = 16px*62.5% = 10px; 1.2em = 12px; 1.4em = 14px。

有的同学要问了，不是16px = 1em 吗？怎么一会儿又变成 10px = 1em 了？没错，这就是 em 的魅力所在，也就是之前所提到的 em 是相对单位的优势。这样转换是为了我们可以更方便地使用 em 这个单位，因为这就是一个十倍的关系。

是不是对 px 和 em 有了一个全新的认识呢？现在再回过头来看看这个 DEMO，我想你会有兴趣看看此页的源代码，你也可以自己试着写一个比较体会一下 px 和 em。希望没有把你弄晕。

那我们为什么要鄙视 IE 呢？对于网页制作者而言，IE（以 IE6 为首）千奇百怪的 bug 实在让人无法容忍，从而导致网页错位，在不同的浏览器下表现各不相同，以至于我们不得不用五花八门的 CSS HACK 来弥补这一缺憾。但是要知道，CSS HACK 实在是不得以而为之，因为所谓的 CSS HACK 都是利用浏览器本身的 bug 来区分不同的浏览器使其识别各自“私有”的样式。这种以毒攻毒式的方法，确实可以在一定程度上解决网页错位等问题，但是会让网页的效率大打折扣，并不算是根本的解决之道。

那么，治标又治本的解决方法是什么呢？在回答这个问题之前，我想先为 IE6 这些年来默默承受的委屈洗冤。

很惭愧的是，我也曾多次咬牙切齿地痛斥过 IE6，并且很不人道地想和它十八代祖宗发生不正当性关系。但是，慢慢地，我了解了并且接受了 IE6 以及它的兄弟姐妹们，原来 IE 的错位源自于它那颗孤傲的心，只要我们足够了解它，那就完全可以避免使用 CSS HACK 来纠正网页错位等偏差。“孤傲的心”，此话何解？在我看来，IE 并非完全像人们所说的不标准，只是容错性不如 Firefox、Chrome、Opera、Safari 这些“标准”浏览器来的好，所以这些标准浏览器看起来比较能够理解我们所需要的结果，换句话说，IE 更直接更直观地把我们写的 DIV+CSS 中出的错误表现出来了，这样就不太讨好一些网页制作者，甚至会让人生厌，疏不知，其实更多时候，是我们自己写的 CSS 不够标准，不能责怪 IE。而且，IE 还有一个私有属性 layout，很多怪异的渲染问题都可以通过触发 layout 得到解决。

话归正题，要从根源上解决 IE 各种错位的难题，我想你会想看看这篇文章，引用作者的一句话：对 IE6 最好的策略就是不去兼容它。好好体会一下这句话的意思吧，当你真正征服 IE6 之后，你会发现这句话意味深长。

仔细比较后发现，原来是字体大小的问题，我的 Chrome 浏览器居然不支持 12px 以下的字体大小？换了以 pt 或者百分比为单位的字体大小，也都是不管用，Chrome 所能识别的最小字体就停留在 12px 了，我倒～

以下我做了个简单的实验，列出了 font-size:6px; 至 font-size:18px; 的字体大小示例，用 IE、Firefox、Opera、Safari 浏览器的朋友都可以看到一个上宽下窄的梯形状。但是用 Chrome 浏览器的朋友就只能看到 18px 到12px 字体大小的一个上宽下窄的梯形，接下去的 11px 至 6px 都将以 12px 的字体大小显示。

我不知道这是 Chrome 的 bug，还是 Chrome 浏览器故意为之，是怕用户看不清 12px 以下的字号吗？而且比 IE 更杯具的是，IE 的 bug 还可以用 CSS HACK 来弥补，而 Chrome 的这个 bug 我都不知道有啥方法可以修正。老革命碰到新问题了，囧～

不知道哪位高手有 Chrome 中小于 12px 字体大小的显示方法呢？不吝赐教啊，在此谢过～

先上个测试页：http://wange.im/demo/duplicate-characters-bug/，你也可以下载这个 DEMO 页的源码在本地测试，后面的注释是4种解决方法，可以一一删掉注释查看。

大家可以用 IE6、IE7、Firefox、Opera、Chrome 等主流浏览器分别来测试一下这个页面，你会发现一个有趣的现象。

出现这个BUG的“机遇“其实并不大，要满足以下一个或者多个条件：

1.父元素的内部有多个浮动元素

2. 最后一个浮动元素前有隐藏元素：包括html注释和display：none的元素

3.子元素的宽度和父元素相同，父元素的宽度减去子元素宽度小于3px

有个特别有意思的情况出现，当我在最后一个显示的div前，再加display:none;的div，下面又会增加不固定的数量的重复文字！

最终得出的结论是：溢出文字的字数=注释的条数 *2-1

这个变态BUG的最早文献是出现在2004年，这里可见。

我不全文翻译了，总结一下他的方法。

1.把浮动的子元素加上display:inline;属性

2.去掉注释 ，使用IE专用注释。<!–[if !IE]>Put your commentary in here…<![endif]–>

以下是 Smigoo MM 总结的解决方法：

1.把浮动的子元素加上display:inline;属性（推荐）

2.去掉注释和所有隐藏元素（缺点：特殊情况下不一定可以删除）

3. 把浮动的子元素加上margin-right:-3px;属性（缺点：要加IE6的hack，也算是好方法）

4.在隐藏的DIV外嵌套一个DIV（缺点：增加的结果复杂性）

经过结合 smigoo MM 的总结，和我遇到的实际情况，因为我的父级浮动元素比较多，导致在 IE7/IE8 下都出现重复字符的囧境，所以我个人建议把浮动元素改成 display:inline-block;

现在算是完美解决了 IE 下重复字符的问题，感谢 smigoo MM，再一次让我认清了 IE 的丑恶本质，和 G/F/W 有的一拼！

今天我在 378q 上又看到了一个相当有意思的 IE浏览器中免安装使用Firebug调试的方法。

方法嘛，简单到不行，就是在网站中引入以下 JS 就可以了。

调出方式和在 FireFox 浏览器中一样，点 F12 或者 Bug 图标即可。

说到这里，或许你就明白了吧，IETester+DebugBar 和 Firefox+firebug 一样，是基本浏览器和辅助插件来查看/调试网站的，而免安装版的 IE 版 firebug 是基于脚本语言，而且很可惜的是，IE 版 firebug 和 IETester+DebugBar 一样，只可以查看 HTML、CSS、Script、DOM 等，但是不能修改值以及即时预览。

以下是 IE 版 firebug 的截图：

最后，感谢国家，并感谢 378Q 的分享，不知道同学们还有什么其他的高招来应付 IE 呢？