当然，你也许是一个优秀的开发者，知道如何构建Web组件，知道如何创建一个令人惊叹的用户界面，知道如何设计一个最佳的用户体验。

你是DIY开发者吗？我的意思是，你是一个能够开发出网站所需的所有资源的开发者吗，即不需要任何外部库、控件等，就可以创建出一个伟大的网站项目？

这也许令你自豪，但考虑到效率，我还是建议你尽量使用一些现有的外部资源。我知道你可以创造一些伟大的代码，但是我们希望你创造一些我们真正需要的伟大代码，而不要在重新发明轮子上浪费太多的时间和资源。

以下是喜欢重新发明轮子的人的一些借口，看看你有没有躺枪：

愚蠢理由#1：我的网站在IE6下运行良好，我的用户没有使用其他浏览器


对于技术而言，唯一不变的就是“改变”。每天都有新技术、新浏览器、新操作系统、新设备出现，你根本无法控制你的用户使用单一的浏览器。

你是希望花费时间让你的网站运行在各种最新的浏览器（包括Android浏览器）上，还是希望多花点时间在为用户提供更有价值的功能和内容上呢？

愚蠢理由#2：开发成本是多少？我可以自己开发


我们来分析一下构建一个简单的日期组件需要多长时间？两三个小时？OK。那么如果让它在每个主流的桌面浏览器、移动浏览器中正常显示需要多长时间？就算在每个浏览器中进行调试、测试、优化需要1个小时，那么共需要差不多10个小时。如果你想确保在其他语言环境、触摸环境中正常运行呢？

最好的方式是，使用（或购买）一个现有的组件，把这些组件的兼容、维护工作交给它的开发者就好了。

愚蠢理由#3：我想通过构建UI组件使网站更加独特

你希望你的网站看起来与众不同，是的，这很重要。但这也意味着你需要花费更多的时间来调整HTML和CSS。

要知道，现有的一些组件也可以为你带来独特的效果，这些组件是由专业的设计师设计的，并且相当模块化，你也可以用来构建一个独特的界面。

愚蠢理由#4：谁真的需要文档？有人看吗？

如果你自己编写UI组件，那么你还需要有一个文档，否则后期将会难以维护。而在实际开发中，当你急着交付或发布时，迫于时间压力，有可能不会去写文档。

现有的一些优秀组件，一般都提供了详细的API文档。因此，不要浪费时间来解决别人已经解决的问题。

愚蠢理由#5：我喜欢给新员工培训我自己的UI工具

如果你构建了自己的UI工具，那么如果想让别人使用它来进行生产，就需要进行培训。培训时间或数天、或数月。如果你使用一个现成的开发工具，那么其他人之前或已经使用过，将大大节约学习成本。

愚蠢理由6：我的web应用是伟大的，应该没有人能够复制它

事实上，如果一个东西是好的，你应该想去复制它。不要重新发明轮子，即不要为每个项目创建一套新的组件。在面向对象编程中，可重用性是一个重要的原则，并贯穿整个系统的架构。试想，如果你在多个项目中共享组件，当你更新一个项目中的组件时，其他项目也将受益。

    经常用CSS的人肯定有知道，min-height这个最低高度属性，在大多数浏览器都是识别这个标签的，但是IE6却不识别这个标签。那我们想要一个最低高度怎么办呢？很简单

height:auto!important;  
height:500px;  
min-height:500px;

我们对IE6进行一个hack。由于IE6不识别！important这个属性，那IE6会自动读取下面的height:500这个属性，然后IE6默认的是，如果里面的内容超过DIV的高度的话，那DIV高度是会自动增加的！这样就达到了我们让DIV自动适应高度的要求了！哈哈，怎么样，是不是很简单呢？

你遇到过火狐浏览器不解析display:block标签吗？你遇到过吗？你遇到过吗？你遇到过吗？！！！！！

今天！！今天，居然神奇的遇到这种事情了！！

事情的原因是这样的，在写CSS的时候，突然发现，FF不兼容了！这是为什么呢？经过反复调试，原来是<ul></ul>没有模块化导致的！

然后就果断的写了一个display:block；上去！然后发现~没效果= =！

没效果，然后我用firbug查看CSS，display:block根本没有加进去！经过苦思冥想，突然在DW的代码提示里面看到了display:inline-block;这个代码！然后果断加上去！！OK，搞定了！下面我们来解析一下这个标签到底是个神马情况！！

注：下文中提到的FF不支持这个属性是指4.0以前的版本，FF4.0版本能正常解析这个标签！
很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，所以很多时候
不得不把这个块元素套在一个内联元素里面，然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章，很不错，综合一下，记录下来。
 
display:inline-block
简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但是这个属性目前不是所有的浏
览器都支持，只有Opera和Safari支持，FireFox3和IE8据说将会支持，Firefox2和IE使用特殊办法可以实现这种效果，下面就来探讨一下

在Firefox2中有-moz-inline-stack和-moz-inline-box实现，但是这两个私有属性在某些情况下都会有异常，具体如下：
1、display:-moz-inline-stack
“当它所应用的外包装器（wrapper）的display为inline的时候，它所包含的a或button将无法点击或无法选取，需要通过position:relative还hack掉这个bug”--乌龙茶
2、display:-moz-inline-box
使用这一属性后，text-align就会出问题，必须使用Firefox的私有属性 -moz-box-align来解决
所以，建议不要使用-moz-inline-box，还是使用-moz-inline-stack

在IE（以下IE8除外）下，如果对内联元素，比如a或span元素，使用inline-block属性是有效的，似乎IE是支持的，其实是触发了IE的layout，从而拥有了inline-block属性的表症。这样我们就有了一种在IE下实现display:inline-block效果的两种方法：

1、先用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（原理：这是IE的一个经典bug，如果先定义了display:inline-block，然后再设置display回inline或block，layout不会消失），代码如下：
div
div

2、直接让块元素设置为内联对象(display:inline)，然后通过zoom:1触发块元素的layout，代码如下：
div

那么为了能够让所有浏览器支持display:inline-block，综合一下，最终的实现代码如下（参考怿飞：模拟兼容性的 inline-block 属性）：

display:inline-block; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持，另一方面下触发IE下inline 元素的 hasLayout*/

display:-moz-inline-stack; /* Firefox 的私有属性，需要时还必须用到position:relative解决上面提到的bug */

zoom:1; /*同样是IE 下触发 hasLayout*/
*display:inline; /*一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block相似*/

/*扩展一下一些其他可能用到的属性*/
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* 如需隐藏文字，可用这四个属性 */
/*另外上面隐藏文字，还可以用更简化的方法：line-height:超级大值;font-size:0; */

overflow:hidden; /* 隐藏溢出的内容 */

vertical-align:middle; /* 行内垂直居中，针对 Opera 比较大的偏离 */

width:？px; /*？为任意非auto值*/
height:？px; /*？为任意非auto值*/