这几天重构“老男人”的模版,认真学习了一下DIV+CSS的基础知识，发现DIV布局比TABLE布局的优势太明显了。

1、普通非结构的改版只要改动CSS就行了，这样不用经常重写模版。

2、这样网站给用户的感觉可以经常变化，对于搜索引擎来说却很稳定。

3、最重要的一点，就是页面打开速度快了不止一倍。

4、还解决了一些用TABLE很难解决的左右栏高度对称问题等。

5、由于去除了TABLE式布局中过多的修饰代码，代码长度大大减少，再次加快了页面打开速度，还节约了服务器带宽。

但是DIV+CSS也不是完美的，很多人都感觉使用TABLE布局是自己用起来费劲（当一个大表格里塞了N多数据时页面打开速度巨慢），别人看起来麻烦，DIV是自己用起来麻烦，别人看起来简单（DIV+CSS由于分块读取和显示，显示速度要快很多）。

如果是TABLE的布局，能很容易发现哪个表格没有关闭，毕竟table/tr/td三个标签的包含比较明显，但如果用DIV，经常是少写一个</div>，页面全乱了，要找很久才知道哪里少了一个，不如TABLE直观。

以上的问题其实都还是小问题，当你使用了DIV+CSS布局后不用各种浏览器去测试页面，打击将是致命的。

我在改版完一天后，偶然想起来用IE6测试一下。因为已经用IE7和Firefox太久了，所以电脑上没有IE6的环境，只好开个虚拟机来用IE6慢吞吞地测试。不测不知道，一测吓一跳，一些在IE7和Firefox中显示良好的页面，在IE6下完全错了位。

搜索了一下，发现原来是IE6、IE7和Firefox对CSS的解释差别太大造成的。其实如果按照标准的CSS写，在IE7和Firefox2下都是没问题的，除了个别高度外，显示效果基本一致，但在IE6里就差别很大。

怎么办？还是老办法，CSS HACK！

找到页面乱的原因是因为IE6认为一个DIV超宽了，所以把本应float;right的DIV挤了下去。而如果设置为IE6下显示正常的宽度，则在IE7和Firefox下看页面就会少了一块一样，也很别扭。参考了一些搜索来的资料，将该段CSS文件改写如下：

改写前：xxx. yyy:{width:600px;} (当设为IE7和Firefox下显示正常的600px时，IE6下会错位，改为590px，则IE6下正常，IE7和Firefox下显示不完美)

改写后： xxx. yyy{width:600px;*width:600px;_width:590px;}（Firefox不认识*和_，而IE都认识*，IE7不支持_，IE6支持_）

切记，顺序千万不要乱，因为当出现重复定义时，浏览器默认按最后一下渲染，所以一定要先正常，再*，最后_。

这样Firefox读取时只看到了正常的定义，而IE都能看到第二个*的定义，于是忽略第一个正常的定义，而IE中因为IE7不再支持_，所以按照第一个带*号的执行，IE6支持_，所以认为带*后的也是重复定义，予以忽略，执行最后一个定义。

有人喜欢用!important来进行CSS HACK，但我觉得!important写起来太长了，不如*和_简单直观。只要记住IE7=*，IE6=_，然后按照先Firefox后IE7，最后IE6的顺序进行编写，一般就可以保证大部分用户浏览正常了。

最后和大家分享一组“老男人” 的统计数据，在访问“老男人”的用户中，目前有60%多的用户还在使用IE6，而已经有16%以上的用户使用了IE7，其余份额被Firefox、马桶、IE5、Opera等各种浏览器瓜分。

浏览器支持标准的不统一给网站设计者带来的麻烦，就和电信到网通的速度一样让人头疼，总没有完美解决的方案，即使进行了CSS HACK，也会遗漏掉一些小小的BUG。但是如果没有CSS HACK的话，就要继续忍受TABLE布局带来的打开延迟等问题。

我现在也明白了为什么一些国际大公司的网站会采用DIV+TABLE的混和设计，毕竟有些地方所有浏览器对TABLE的支持还是比较一致的。不过我既然已经走上了DIV+CSS的路，就会一直走下去，不能怕痒就不吃桃子啊。

最后惭愧一下，2005年，在网易的时候，彭毅同学已经开始使用DIV+CSS重构页面了，而当时偶还刚刚学会用一些样式表来美化TABLE的显示效果。和专业人员的差距是相当的大啊，足有3年之多。