JS演示跨浏览器的inline-block

前言：我这篇日志基本上不介绍实现原理。跨浏览器的inline-block的详细原理帖请见：
原文：Cross-Browser Inline-Block
译文：跨浏览器的 inline-block
OK，中英文都有了，您啦随意挑选。

我这里演示的是我最近一个实际项目的页面Demo。请看这里：用js程序来演示如果实现跨浏览器的inline-block
因为这个页面需求刚好需要用跨浏览器的inline-block的原理来实现，同时我又为了能给同事讲解更清楚，就做了这么个粗糙的Demo。大伙如有兴趣，可以配合上面提到的原理文章，自己演示下Demo，我相信这样会记得更牢靠。

OK，开始说Demo。整个演示按照教程讲解的步骤来优化每个浏览器的代码，大体流程是这样：firefox3 -> firefox2 -> IE7 -> IE6。而我在实际开发和写这个demo的过程中，省略了针对firefox 2优化的这一步骤。我当时的想法是，firefox的更新在业内算是比较积极的，而且大部分人的firefox都是提示自动更新升级换代的（我就是），所以也不会留有单独的firefox 2版本。更重要的是，我对作者关于firefox2的BUG处理也没弄明白是怎么回事（貌似作者也不太明白），所以也就把firefox2省略了。以下是作者在原文中对这部分的说明：

 Firefox 2 doesn’t support inline-block, but it does support a Mozilla specific display property ‘-moz-inline-stack’, which displays just like inline-block. And when we add it before display:inline-block, FF2 ignores that declaration and keeps -moz-inline-stack because it doesn’t support inline-block. Browsers that support inline-block will use it and ignore previous display property.
 ……
 Honestly, I don’t know what causes this bug. But there is quick fix. Wrap everything inside the <li> with a <div>.

Firefox 2 不支持 inline-block，但是它支持 Mozilla 特有的显示属性 ‘-moz-inline-stack’，这个属性和 inline-block 比较像。把它加在 display: inline-block 之前，FF2 会忽略 inline-block 而保留 -moz-inline-stack，因为它不认识 inline-block。支持 inline-block 的浏览器会使用 inline-block 而忽略之前的显示属性。
……
坦白地说，我不知道什么导致了这个 bug。但是有个快速的修正方法。把 <li> 中所有的东西用 <div> 包含起来。

有知道原因的朋友请告诉我，因为我太笨了，而且手头也没firefox2了，只能意淫作罢，故难想明白 T_T

OK，继续说演示。
第一步“调整inline-block”是完成firefox的CSS配置，如果你是在IE下演示，点击这步是不会看到有页面效果。
第二步“调整垂直对齐基线”会将li的垂直对齐方式改为顶部对齐，这步对firefox和IE系列都起作用。
第三步“调整IE的hasLayout” 和第四步“让IE6变相实现min-height”在firefox下不会起作用。
最后一步是将li重置为最常规CSS代码状态，即元素自身外观定义，也算是我们写css的时候第一直觉会定义的东东。

好了，其他的就不多说了。大家配合教程看效果会更好，我就不废话了。
注：该模型在firefox3、IE6/IE7/IE8、Opera9.26、Safari 4 For Win下测试通过。

演示Demo：用js程序来演示如果实现跨浏览器的inline-block