很喜欢facebook的弹出框样式，官网是用table实现的，可以看克军抓取的demo页面：pop-dialog-facebook.html

一直想用非table方式实现，晚上尝试了一把：facebook_dialog_test.html

花了一个多小时，仅针对Firefox3，IE8，Safari4，Chrome2和Opera9做了测试。没时间去理IE7和IE6了，有兴趣的可进一步尝试。
2009-05-17：修改了写法，已经支持IE7和IE6. IE6下直接降级为直角，圆角半透明太难折腾了。

一点想法：

1. facebook的table实现方案，看起来多了不少标签，而且语义化不太好，但用table实现，思路非常清晰，兼容性也很好。大量采用table实现界面元素的公司，还有google.
2. 在背景图尚未下载完全时，对话框的样式满足“优雅降级”。
3. 在禁用CSS后，两种实现方案呈现出来的样式差不多。就是标题是h2还是h4的区别。（个人觉得h2更佳，但习惯性写成了h4，囧）
4. 我的实现方案在Firefox3等高级浏览器中，一次编码全部通过。只考虑高级浏览器的话，工作量和table方式差不多。
5. 在IE6等老旧浏览器下，两种方案表现得都不是很完美。相比而言，table方案工作量少点。
6. 或许，我们应该更坦然的去接受table方案？对于这种小模块的布局，table真的很好用，实现的技术门槛很低。

语义，也许就如诗歌一样，努力去做，可以很优雅很美。但绝大部分世人更喜欢通俗小说，诗歌在现实面前是种奢侈品。

打印  |  类别：设计之外  |  源地址