用于图片列表的表格

Music »	World »	Opinion »
Stevie Wonder and Friends, Here and Gone		Letters: . . .And the Pursuit of Happiness

用于布局的表格

Power E*TRADE: Low Trade Pricing. Get 100 Free Trades–Apply Now! Photos, fine art, books and more.

World » Musharraf Prepares to Drop Army Role At Least 35 Dead in Iraq Violence Car Bombing Kills 2 in Kabul District Used by Foreigners U.S. » Musharraf Prepares to Drop Army Role At Least 35 Dead in Iraq Violence Car Bombing Kills 2 in Kabul District Used by Foreigners

Business » Home Prices Post Big Drop in Survey Postive Data for Abbott’s Proposed Heart Stent Google’s Next Frontier: Renewable Energy Technology » NBC Universal to Offer Interactive Ads via TiVo Google’s Next Frontier: Renewable Energy Bits : Yahoo’s Cyber Monday Meltdown

以上代码在IE5.5，IE6，IE7以及新版的Opera、Firefox和Netscape下表现一致。IE5能显示基本效果，其他没试过，也没什么必要。
演示例子：http://www.panweizeng.com/others/example/two_style_for_paging.html

演示地址：http://www.panweizeng.com/others/sample/too_many_style_tags.html

ppt下载地址：
动态专题制作 http://www.panweizeng.com/download/dynamic_template_design.ppt
网站重构和CSS编程进阶 http://www.panweizeng.com/download/web_standard_css_mastery.ppt

你应该已经知道我现在非常推崇web标准。现在普遍流行的标准是：用(X)HTML来表示页面结构，用CSS来设计样式，而用Javascript来表现行为。现在很多人都已经熟悉HTML，它从web发展的初期就已经出现了，你可以到处找到它的教程。CSS正慢慢被人们所掌握，大公司们开始把它们的网站转移到css布局，网站开发者的博客圈也在影响着越来越多的人。

当你向大家推广web标准的时候，跟我们大部分人一样，你会给和很多人讨论。如果是在类似EFNET上#CSS这样的在线聊天室推广的时候你会更清楚的发现：里面的人们对CSS了解有着很多不同的级别。这篇文章就准备按等级列出这些不同级别的开发者是怎样影响着web的。现在开始：

等级0

“CSS(Counter-Strike Source：反恐精英-起源)? 不是那种多人游戏么？？”

这些人可能从未制作过网页。也许他们用过纯HTML设计但他们几乎不知道他们曾经做过什么。我们在#CSS(聊天室)遇到过这么一些人，倒不是他们打算开始学习web标准而是因为他们进错了聊天室，大部分以为进入的是Counter-Strike Source（反恐精英-起源）。没有必要为这些人担心，他们这辈子可能永远也不会去做网页所以不会带来什么害处。

等级1

“哦，我有时候用它去掉链接的下划线。”

和等级0不同，这个级别的人实际上了解基本的HTML。他们可能5年前学过并且做过一些简单的网站。他们很少使用CSS，仅仅当需要做一些简单的但纯HTML不能完成的任务时才用，比如说去掉下划线以及设置行高（奥！不用妄想用HTML来设置行高）。这些人制作了一些代码很糟糕的网站但他们当中很少有流量大而且受人欢迎的网站。这意味着他们不会带来太大的伤害。

等级2

“不，我不喜欢div；table更好用一些。”

同那些从等级1过来的人一样，他们继续进行着尝试新的东西而不是仅仅使用HTML。他们掌握了HTML里面的tables，然后开始用它来随心所欲地设计网页。当完全精通HTML以后他们就停止了尝试和探求新的工作方式。他们听说过其他人使用div来设计网页甚至也花了一些时间尝试过学习div这种设计。通过几个小时的学习，他们不得其法，于是又转回到table布局并一直坚持下去。很多人确实了解CSS的语法有时甚至还知道一些背景，但是他们认为相比于table布局CSS实在太难了而且难以得到支持。

看，这些危险的家伙，他们当中不少人还是大公司网站的web管理员。他们从网站运营开始就是公司web开发部门的头。我们应该着重影响这些人，这样对web的发展意味深远。在你推广web标准的时候应该重点开导他们。

等级3

“是的，我已经听说它非常好，但是我不能使用它因为……”

这些人知道一些CSS而且可能听说过它所带来的好处，但始终没有采用CSS布局。他们尝试过使用简单的布局而且一些人还挺喜欢这种设计方式。问题是还有些东西令他们望而却步。可能他们有一个处于等级2的老板，可能他们的网站需要迎合使用Netscape 4的用户，虽然有很多不同的原因但是总是会有一些东西阻止他们使用CSS布局。

这些人需要知道尽管CSS不能到处运行并非什么大不了的事情。老的浏览器仍然可以看到完整的内容，而且是纯粹的内容。你会影响到一个新的听众：使用web标准构建网站将从易用性和可用性中受益，新的浏览器会获得丰富的浏览体验并且网站变得更容易去增加内容。把这些告诉他们。如果你运气不好，他们可能没有网站的决策权，但即使这样也是值得的,因为他们将影响到等级2的老板。

等级4

“CSS? 对，我所有的布局都是用div来做的。”

这些人在他们的网站上只使用div来布局并没有什么好奇怪的。他们网页的每一部分都使用div，而且使用了一些匠心独运的ID名称（比如#toprightredline 或者甚至是#r5_c7，其中r代表行，c代表列），然后用像素精确地绝对定位这些div。结果看起来很好，而且甚至能通过XHTML 1.1验证，但是他们所失去的是CSS布局所带来的最大好处。这些网页当用屏幕阅读器解析的时候非常糟糕。同样在不支持CSS的老浏览器中，他们不会得到网站的内容而是一大块杂乱无章的文本。当使用大量糟糕的类名和ID名称时，改变网站布局的可能性将降低：假如红线要改成黑线你将需要改动所有的HTML文件（可能数以百计）。别数落人家太笨或者让他们去google搜索CSS,他们坚信自己非常聪明而且起初也是从google开始学习CSS的，别陷进去。指出他们网站需要改进的地方以及使用web标准会带来什么好处。你要保持头脑冷静然后告诉他们为什么。

等级4的人制作出来的网站有点糟糕。但是他们容易接受新的东西所以对web害处不大。毕竟不久前他们已经掌握学习和使用CSS。

使人们这样设计的某些原因是WYSIWYG（What You See Is What You Get，所见即所得在线编辑器）正是这么做的。大部分这种编辑器会产生非常糟糕的只含有div的HTML代码，不过我听说这类编辑器正在逐步改进。这是个好消息，希望这样能够帮助人们从等级4升到更高的层次。

等级5

“我用CSS进行设计，它比table布局好的地方是……”

经过大量的阅读，讨论和思考，大部分人达到了等级5。你使用CSS布局的同时知道了为什么它会相对更好一些。这个等级的人制作出来的网站会有一些小问题但是无关紧要。当被询问时他们可以解释到为什么结构和表现分离更好而且他们已经用CSS布局足够长时间去了解共有的缺陷。我想很多这篇文章的读者都处于这个等级包括我。但这并不是我们能做到的最好的层次，我们还可以超越……

等级6

“什么版本的CSS？对，我知道。你读过我那本关于……的书了么？”

对于某些人仅仅知道怎么样和为什么是远远不够的。这些人为CSS更好的应用而努力奋斗着并经常发表关于CSS新设计方法的好文章。他们坚持不懈地回到分析基本的CSS是如何填充的,从不同的角度解决一些难题,结果经常是发表了更多非常优秀的文章。有些人事实上已经研读过W3C的CSS规范（原文）,深谙各种浏览器对CSS支持的差别。他们是初学者的楷模并用他们的影响力做了很多对web发展有深远意义的事情。其中有些还可能是Web Standards Project的成员之一。如果你曾经在他们的网站上发现过一个错误，那肯定是有原因的。问一下他们然后他们会告诉你为什么。

就这样。我希望这篇文章能给你一些灵感来推动web向前发展。你处于那个CSS等级呢？你认识一些处于最后等级的人么？

如果line-height改为height就不行

解释是：
1:http://www.w3.org/TR/CSS21/visudet.html#line-height其中有一句
The inline boxes are aligned vertically according to their ‘vertical-align’ property.
2:http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align另外有一句
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

可见vertical-align和line-height两个属性是连在一块定义的。vertical-align属性影响的垂直定位，是局限在“行”这个渲染单位里面的。所以需要先设置line-height，设定line box的高度，才能使用vertical-align。而height影响的是div这个block的高度，而不是line box。

谢谢BSD同学的解答。