由改写 HTML 想到的——CSS、DIV

2005-07-24 21:18:13转载

发现 <hr /> 标签在 Firefox 下无法像 IE 下一样使用 height、text-align、color、size 等诸多标签（居然一个都不支持），用 float 也不行，很奇怪在 Firefox 下想搞出一个左侧对齐、高 1px 的分割线该如何搞（不用 div 什么的代替，本来就应该是用 hr 的地方），以后看到哪个网站有分割线了再学学。

[img right]http://www.w3.org/Icons/valid-xhtml11.png[/img]把页面的一些冗余 table 改成了 div，一排 p 也改成了 li，这些小的改动都是我能接受的。但我非常反感一些 w3c 标准鼓吹者，他们完全走进了另一个极端。觉得把一切 table（包括确实该用 table 的地方）都改成 div 就叫 NB，就叫下一代标准，然后成天对着右图所示的那种 w3c 认证图标自我陶醉。

我只承认一些必要的方法，如果一个人知道了 margin padding 和 ul li（特别是 display: inline 情况下），就可能会让原本臃肿 html 的减轻很多，但完全的 div 则毫无必要。只要 HTML 是手写的，冗余应该都会减少很多。

说句题外话，有人说用 Dreamwaver 有效率，可你并不是总能用上它，比方说修改一个论坛模板的时候。我建议所有人都找一款合适的文本编辑器或者 IDE 去尝试手写，他只是个 markup language，连 script 都不是（起码应该有变量、循环和判断…… xslt 可以算 script 了），如果你对一个有 rowspan 的 table 就开始感到迷惑了，我真怀疑你是怎么写其他程序的。

后来想出一个比喻来解释一些 CSS 技巧，就是[url=http://zh.wikipedia.org/wiki/%E5%88%86%E5%BD%A2]分形[/url]，相信很多人都见过 [url=http://plod.popoever.com/archives/000164.html]64k demo[/url]，事实上人们看到的是逆向过程，这个数量级惊人的压缩比，绝对不是说作者可以把任何 3D 视频都可以压到这种程度，而是作者一直在尝试如何让一些简单描述代码所产生的图形实现接近现实中的物品，分形有很大功劳。如果说 CSS 解决了所有 HTML soup，那同时它也制造了相当多的 CSS soup。

举两个简单的例子来证明 div 是多么的不好用，div 没有“width: auto”，即刚好适应所包含的内容，而 table 默认就是 auto，而且作为容器，它会经常把东西溢出来

[quote]
<div style="border: 1px solid red;">
<img style="float: left;" src="http://www.w3.org/Icons/valid-xhtml11.png" />
</div>

<hr style="clear: both;" />

<table style="border: 1px solid red;">
<tr>
<td><img style="float: left;" src="http://www.w3.org/Icons/valid-xhtml11.png" /><td>
</tr>
</table>
[/quote]

效果如下：

[img][file=70][/img]

那条 2px 高的红线就是所谓的 div

如果是现实中有这么烂的容器，我会直接把它扔到垃圾箱里，而且是有不可回收标志的那种，可在 HTML 里，除非了被指责的 table 就只有 div 了，可愣有人说他能完全取代 table。而且 Firefox 的溢出更容易出现，Firefox 的作者应该明白这个最浅显的道理，Web 的制作者在绝大部分情况下都不是想要溢出的，Firefox 本应该更改一些默认的 CSS

还有一些代码被改的很罗嗦，不知道 w3c 是不是觉得越罗嗦才越标准，align="center" 这么常用的标签不合法了，这是应该的，可如果你要取代它，却只能这样： style="margin-right: auto; margin-left: auto;" 哎，当初为什么不搞一个 float: center 之类的……