说明
请注意,这些布局的 CSS 带有大量注释。如果您的大部分工作都在设计视图中进行,请快速浏览一下代码,获取有关如何使用液态布局 CSS 的提示。您可以先删除这些注释,然后启动您的站点。要了解有关这些 CSS 布局中使用的方法的更多信息,请阅读 Adobe 开发人员中心上的以下文章:http://www.adobe.com/go/adc_css_layouts。
清除
由于所有列都是浮动的,因此,此布局对 .container 采用 overflow:hidden。此清除方法强制使 .container 了解列的结束位置,以便显示在 .container 中放置的任何边框或背景颜色。如果有任何大型元素突出到 .container 以外,该元素在显示时将被截断。您也不能使用负边距或具有负值的绝对定位将元素拉至 .container 以外,这些元素同样不会在 .container 之外显示。
如果您需要使用这些属性,则需要采用其它清除方法。最可靠的方法是在最后一个浮动列之后(但在 .container 结束之前)添加 <br class="clearfloat" /> 或 <div class="clearfloat"></div>。这具有相同的清除效果。
脚注
在列后面(但仍在 .container 内)添加脚注将导致此 overflow:hidden 清除方法失败。您可以将 .footer 放到第一个 .container 之外的另一个 .container 中,而不会影响效果。最简单的选择是从含有标题和脚注的布局开始,然后删除标题以便在该布局类型中利用清除方法。
Internet Explorer 条件注释
这些液态布局包含 Internet Explorer 条件注释 (IECC),用于更正两个问题。
- 在基于百分比的布局中,浏览器在舍入 div 大小方面不一致。如果浏览器必须呈现诸如 144.5px 或 564.5px 之类的数字,则必须将这些数字舍入到最接近的整数。Safari 和 Opera 向下舍入,Internet Explorer 向上舍入,而 Firefox 向上舍入一列,然后再向下舍入一列,以便完全填充容器。这些舍入问题可能导致某些布局出现不一致。此 IECC 提供了用于修复 IE 的 1px 负边距。您可以将其移至任何列(以及左侧或右侧),以满足您的布局需求。
- 由于在某些情况下 IE6 和 IE7 中会呈现额外的空白,因此已向导航列表中的锚记添加缩放属性。缩放将为 IE 提供其专用的 hasLayout 属性来修复此问题。