—— 本文刊登在《程序员》2009年6月期
最近网上再度兴起了CSS布局和Table 布局的争论。我最初颇有些不以为然：我原以为CSS 布局的意义早已深入人心，却没想到还有这么多设计师及开发人员持有异议。
静下心来看罢大家的讨论，一番细想，觉得原因可能有两个方面：
一方面，IE6阴魂不散，让Web开发成本居高不下。网上曾经有一个统计，数据显示Web开发人员针对IE6的投入/产出比是最低的。相信大多数前端工程师都有被IE6折磨得咬牙切齿的经历。与其那般痛苦的用CSS布局，还不如用table 来的爽快方便。
另一方面，我发现前端工程师们越来越务实和注重效率。CSS2以及CSS3的诸多新特性迟迟未能广泛普及，而Web标准布道者们所津津乐道的CSS的优点，在照进现实时又经常会遭遇妥协。尽管我一直以Web标准布道为己任，但也不得不同意：table的浏览器兼容性是最好的；table 布局对于设计师来说更容易上手。 就国内环境而言， table切图依旧是制作门户网站专题或者电子商务网站促销页面的最常用方式，存在即有它的合理性。
所以，我们在推崇CSS布局的同时，无需为了证明它的优越性而把table本身贬得一文不值。日常开发中，也无需激进得完全抛弃table。table本身有语义，该显示数据表格的时候就应该使用<table>；在开发过程中，一些需要权衡成本的场合用table+css的布局也未尝不可。在这方面，很欣赏google 和 facebook 前端工程师们的务实做法。大家可以去关注下facebook 上常见的带半透明阴影的弹出对话框，就是使用<table>来制作的，同样非常的精妙。
这一番的争论，结合近年来Web标准的发展，让我开始思考Web开发中改良和改革的区别。
XHTML 2试图直接进化到XML，宣布与HTML的决裂。这曾经让我这个传统的HTML开发者感到恐慌。而当我看到WHATWG组织提出HTML5(最终被W3C认可)的时候，它的温良的改进让我感觉亲切得多，事实也证明，HTML5正越来越向我们走进。而Douglas Crockford甚至觉得HTML5都太猛烈了，提出了HTML 4.2的改良方案。
再看JavaScript， ECMAScript 4 将JavaScript 改得天翻地覆，所幸技术委员会在最终阶段回归理智，重新提出的向下兼容的ESMAScript 3.1 显然得到更多真正战斗在一线的开发人员的认可。
改良，而非血淋淋的改革，也许才是推动技术发展的更实际、更合情合理的方式。Web标准的演进是如此，产品或项目的升级是如此，甚至社会制度的建设亦如此。
整合了 ucenter就等于整合了整个php界的所有php程序。
一、功用：
不对，何止整合了整个php界的所有php程序，而是整合了 ucenter就等于整合了所有的asp/asp.net/php/jsp等其它语言的所有web应用程序。（因为ucenter client的api开发包，dz会推出其它语言版）
而且所有整合的程序同步登录，同步退出，同步修改密码。最终用户可以通过它轻松通行在各个应用之中，无需重复登录、注册、退出 阅读全文
图形化按钮，就类似这个样子的：
当然，它其实就是一张图片而已。这样做纯粹是为了好看。这里探讨的不是怎么设计这种按钮，而是怎么在网页里把它做出来。这里要提几个要求：
A. 语义化。如果这个按钮叫“完成注册”，就要在HTML中写出这四个字，以保证只读HTML的情况下也知道这个按钮是什么文字。
B. display:inline。用display:block可以很容易的调整大小。但是如果一横排并列两个按钮，就比较难解决。用float?不好。万一我需要两个按钮并排，且居中，用float会增加更多额外的代码。
C.理所当然，跨平台兼容性。所以inline-block的想法，在IE6上就行不通。
有几种方法可以做这种按钮：
1. 用image类型的input标签，或是button标签。这样做最大的问题是，必须在HTML里引用图片地址。我个人是倾向于不要将修饰图片地址放在HTML代码里。结构和表现要分离嘛。此外，用button环绕img，你会惹一堆布局上的麻烦。
2. 用a标签，CSS加背景。这种方法挺容易。但是有几个问题：
a) 对inline的a标签设置高宽，你会遇到一堆麻烦事儿。
b) 此外，为了达到要求A，需要在a里面写入文字，并且将文字隐藏掉。这里如果用text-indent的话，就不能用inline了。另外一个方法是vertical-align，但是，这个属性基本上被我废止。原因是vista里，用微软雅黑及vertical-align，你会遇到很可怕的事情。记住要求C：跨平台兼容性。
c) 用a标签，你还得写JS来提交表单，麻烦。
3. a标签环绕图片。这个同样不是太好，理由在1和2里都有讲。（但它倒是可以满足要求B：display:inline）
4. 用buton类型的input，加CSS背景。这种方法看上去是可以满足要求A和B。关键的问题是：在保证跨平台兼容性的同时，如何隐藏掉button的文字。
我这里给出一个比较好的方法：
解释一下：在FF3和Chrome中，将按钮的text-indent设为-3000px，就可以将文字隐藏。但同样的设置在IE下，会导致按钮本身也跟着跑到-3000px的位置去，除非按钮被声明为display:block（但这就不满足要求B了）。
对此有一个巧妙的解决办法：首先用hack在IE里将text-indent恢复。然后再将左padding设置成120px，和width一样。这个方法之所以很妙，是因为按钮是唯一一个不遵守盒模型的元素，无论在哪个浏览器下。所以将左padding设为和width一样宽，会将真正的文字空间压缩到0！。
但是这个解决办法在FF中却会有问题。原因是，即使文字空间压缩到0，FF仍然会将文字显示出来，而不受overflow的影响（事实上这样处理是符合标准的，理由自己思考一下）。所以仍然要写text-indent。
还有一个问题是，在Opera里，左padding要设为差不多180才能将文字隐藏。原因不详。至少我用的9.2版本是如此。所以上面的代码在Opera中并不兼容，需要再单独为Opera做hack。
还有一层更深入的思考：那为啥不就将padding: 0 0 0 180px以正常的形式写到CSS中呢？这个就作为思考题啦，提示一下，180px会对FF造成不利影响。
综上呢，我给的代码是多一不可，缺一不可的（当然，我没写对Opera的变态hack，因为这家伙已经开始背叛标准了，而且不同版本之间兼容性很差，所以放弃掉它）。
此外还可以补充一下，cursor:pointer是为了增强可用性。这是个很奇怪UX问题，如果是正常的button，鼠标不改变，也不会觉得奇怪。但是如果按钮没有突起感，鼠标移上之后不变形，就会感觉是不可点。
插件简介：
在使用WordPress过程中，当我们设置“自定义永久链接结构”包含postname的时候，我们发布的中文标题的文章就会出现很长的包含一大串%XX的字符串，很不美观，我做的这个插件，可以在发布文章的时候自动将postname的内容转化为中文汉语拼音，在自定义URL中以拼音的方式发布，看起来也美观一些。 阅读全文
把JS文件中的document.body换成document.documentElement就可以了
