




好的,我们要针对固定(static)组件与浮动(float)组件如何互动做个测试。根据 W3C 的规格,当浮动组件后面紧跟着固定组件时,浮动组件会以包含浮动组件的对象(在此是「body」组件)的左侧作为显示区块的基准,固定组件也会套用相同的基准,并且与浮动组件处在相同的重直高度。
除非固定组件设定左边界(margin)让自己往右边靠,而不被浮动组件挡住,否则浮动组件应该会覆盖住固定组件。你也可以利用 clear:left 或 clear:both 等属性来「清除」固定组件,让固定组件放置在浮动组件的下层。
如图,带有绿色边框(border)的区块(div#left)在「body」里往左浮动,后面接着紫色区块(div#static)。如果 div#static 没有设定宽度,从大部分的浏览器都能显示正常,即绿色边框区块叠在紫色区块上。
但是因为 div#static 已经宣告宽度,各家浏览器的差异就很明显了。Internet Explorer 会将浮动组件视为 body 左侧边界的一部份,而让 div#static 放在 div#left 右侧。Moz/N7 和 Op6 则按照规格,让两个区块都固定在 body 的左侧边界上。
在制作复杂的浮动式版面时,通常需要宣告一些区块的宽度。但如果浮动区块后面接着固定区块时,IE 的表现方式就跟其它遵从标准的浏览器不一样。这样的情况让人不得不正视这个问题。(除非你是哈利波特里法力无边的 *那个人*)
解决这个问题有好几种方法。其中之一是只帮 IE 写程序,即使知道在少数浏览器下会烂掉。或是避免使用宽度宣告,让许多形式的版面都变成「禁区」。
不过这种烦人的局面好象有越演越烈的趋势。Opera7(发行于 2003 年 1 月)做了跟 IE 一样的蠢事。 Opera7 本来该像 Opera6 一样,让 div#static 以检视区(viewport)最左边当作基准,忽略浮动组件的存在。结果 Opera7 却把 div#static 并列于浮动组件旁边。
就我个人看来,这代表 Opera 的决策者决定认输,与其固守标准规格,不如选择「好走的路」。微软确实很有影响力,显然地浮动组件的标准快行不通了。我想所谓的标准规格,大概只要比尔盖兹点头说是的就是了。
好吧,我假设这已经是最好的情况。只有一个笨透了的私定标准总比两个根本无法公平竞争的标准来得好。作浏览器的人真该多喝点蛮牛(译注:原文是用 bulldog,这是一种提神饮料品牌)。不过老兄们帮帮忙,做浏览器的时候不要连 IE 那堆意外产生的臭虫都模仿好吗? ;-/
我没有洁癖,能够跟微软设计的规格相处愉快。但是当微软公开支持某些规格,然后又暗地里嘲弄它们,这就让我无法忍受。这样子会有什么未来?
这些问题在过去已经被一讲再讲。亲爱的读者,如果你有任何可以跟微软高层联络的管道,拜托你看看能不能探到一些小道消息。我已经开始担心 CSS 这玩意儿的规格并不像它所说的简洁俐落,因为大部分的浏览器拒绝以正确的方式读取它。这种僵局总是要解决的;那为我们为什么不现在就把它做掉呢?
Big John
e-mail ©positioniseverything
最后修改日期:
January 28, 2003
Created January 28, 2003
中文翻译:
acer
