上次Blogger被GFWED的时候，我说过坚决不转移到WORDPRESS是因为它太迎合我把东西做复杂的欲望，现在实践证明确实如此……

由于形势所迫（不仅因为GFW），我不得不放弃Blogger重新建立一个稳定的BLOG，熟悉WP的插件加上制作这个主题花了4天时间，超乎想象了……时间主要浪费在设计、浏览器兼容上面……本帖我将用来发牢骚，并且分享一些经验教训，没兴趣的同学可以跳转到其他地方去了……

页面设计在中途大幅度修改了3次，这次我想恢复到传统风格，因为如今那种简洁大字体大空白色彩明亮固定宽度居中对齐边缘有阴影的WEB2.0风格太普遍了，作为代表个人形象的BLOG，我希望有一些不同的个性，而且我虽然也喜欢“简洁”，但不喜欢“简单”。本来是想把WEB2.0的设计元素和配色与奇幻游戏元素结合在一起，但尝试过之后发现很困难，主要是配色很难，而且“留白”在WEB2.0风格里确实占很重要的地位，但在这个页面里我没办法留很多空白（何况最初就决定要做三栏布局）。与做图和配色相比，我还是更喜欢写代码，所以我懒得花更多时间来完善目前的设计了……

这个BLOG的布局可以说是实验风格的……三栏的液态布局，左栏的宽度是自适应的，还有一部分内容固定在窗口顶部，无论怎样拖滚动条，它都会随着页面移动，实际上我是受了Westeros的启发才想用这种相对窗口固定的设计，但是实现起来很麻烦（Westeros的效果其实也只支持IE7和FIREFOX，在IE6里会变得像框架布局一样），如果用JS来实现，移动就不可能是平滑的，衔接的效果不好，用CSS来实现却有很严重的缺陷，首先IE7以下版本的浏览器不支持position:fixed属性，必须用HACK来模拟，我采用的方法是用一个DIV来包含所有元素，在IE7以下版本里给它height:100%;overflow-y:auto;的属性，把顶部元素的定位改成绝对，所以IE6用户看到的右侧滚动条其实不是浏览器本身的……

由于用了两种布局方式，而液态布局的三栏里既有浮动也有非浮动，再加上中间的羊皮纸效果必须在左右边缘采用不同的背景图，很多地方的定位都要精确到像素……所以这个主题的CSS写起来很头疼，DEBUG花了很多时间，目前在opera里似乎还有一个毛病，但我一向都是歧视opera用户的（因为占有率才0.8%左右嘛），暂时懒得改了……

由于设计上的限制，有2个地方的布局不得不用JS来调整，一个是改变顶部fixed层的宽度，因为它的定位方式是fixed或absolute，无法做出液态的宽度（也就是说宽度随浏览器的大小自动填充，但是与右侧总保持固定距离），另一个是让左栏和中栏的高度相等，由于无法使用统一的背景图片，所以这里也只能用JS来调整……

我倒不在意什么“预留退路”、“无障碍”之类的JS设计观念，反正如今在WEB上混没有JS已经寸步难行了，而且我没有用JS来影响内容…………但是用JS来调整布局会遇到另一个问题，如今的JS代码都是放在window.onload里运行的，因为页面加载完成、DOM建立之前，很多方法都不能用，但问题在于，window.onload不仅要等DOM加载完，还要等图片（指img标签）加载完，我的BLOG页面里整合了很多东西，每篇文章的题图、YUPOO的相册、豆瓣的封面……如果要等这些东西都加载完才修正布局，显然是不现实的，幸好我在国外一个BLOG上找到解决办法（地址忘记了，抱歉），可以在onload事件触发之前、DOM刚加载完时就执行修正布局的函数：

DOMsinit就是我要执行的函数，第三个参数本来是布尔值，用来决定事件在冒泡还是捕获阶段触发，但DOM加载的事件显然没这些东西，所以必须传空值，以上是适合标准兼容浏览器的方法，对IE要用完全不同的代码（放在HTML里）：

ie_onload.js就是要执行的函数……为了IE要专门增添一个JS文件，真是麻烦……我还没搞清除defer是什么鬼东西，反正这样用就没错了……

就算你只是使用window.onload，也要考虑到：WP本身和某些插件，都可能有自己的JS函数，会用到window.onload，如果你直接写window.onload=function(){……..}，就会把其他功能覆盖掉，一定要用这类方法：

本来我还希望用户在改变浏览器窗口大小后，顶部的宽度也能跟着调整（因为用CSS实现的自适应都有这种效果），所以用了window.onresize事件，但大家都知道，即使是液态布局，当窗口小于一定宽度后，布局也会乱掉，因为容器虽然可以自动变形，但内容却不会改变，浮动定位在这方面最敏感……由于我的BLOG页面里内容比较多，所以宽度不能少于900多px，在window.onresize里我也做了相应的处理，但是问题就出来了……这个该死的事件在不同浏览器里的行为不一致，在按住窗口边框——拖动——放开鼠标的操作之后，onresize在firefox里会触发1次，在IE7里会触发2次，而在IE6里……居然触发3次……结果就是：限制最小宽度的函数在IE6里会导致浏览器假死……我觉得没必要为这种BUG自找麻烦，所以把onresize改成这样了：

version>=7 和 aVersion.indexOf(”MSIE”)==-1 都是浏览器校验，表示只有当IE版本大于或等于7，或者在非IE浏览器里，才限制页面的最小宽度……

本来还想加一些JS效果，比如可折叠的侧栏widget之类，但是把兼容性改下来之后就完全没心情了………………

最后还是回到设计话题，自适应宽度的布局其实还是比较迎合大屏幕（高分辨率），可以充分利用空间，改善用户体验，但是如果页面里内容比较紧凑，那么对于普通分辨率的用户（1024×768）来说，效果反而不如固定宽度……目前主流的BLOG设计是固定宽度，单栏或两栏，底部再加上一栏放各种列表，所以我的布局方法虽然技术上麻烦的多，但也许并不讨好，那也没办法的事……