正 文

Internet Explorer 6 中的 CSS 增强功能


www.7dspace.com  更新日期:2005-10-11 8:31:22  七度空间


谁移动了我的画布?

本节讲述了在 !DOCTYPE 声明为 Internet Explorer 6 或更高版本打开符合标准的模式的情况下,BODY 和 HTML 元素的呈现方式有哪些区别。

在更早版本的 Internet Explorer 中,BODY 元素表示画布 — 文档内容可在其中呈现的整个表面。BODY 元素的大小不能更改,它等于窗口的大小。针对此元素设置的边距呈现在该元素的边框和滚动条之内。

从 Internet Explorer 6 开始,当您使用 !DOCTYPE 声明打开符合标准的模式时,BODY 元素可以从其内容获取其大小,也可以显式设置其大小 — Àý如,像 DIV 对象一样。在符合标准的模式中,HTML 元素表示画布。

当您打开符合标准的模式时,HTML 元素还会成为定位容器,用于那些没有定位父元素的定位元素。关闭符合标准的模式时的情况与更早版本的 Internet Explorer 一样,如果没有定位父元素,则会相对于 BODY 定位一个绝对定位元素。关闭符合标准的模式时,BODY 元素表示画布,这一点与更早版本的 Internet Explorer 也一样。

滚动条

SCROLL 属性会设置或检索一个值,该值指示是否打开元素的滚动条。对于 Internet Explorer 6 或更高版本,当您使用 !DOCTYPE 声明打开符合标准的模式时,此属性则会应用到 HTML 元素。符合标准的模式关闭时的情况与更早版本 Internet Explorer 一样,此属性应用于 BODY 元素,而不会应用于 HTML 元素。

注打开符合标准的模式时,可用于管理超过其容器大小的内容的overflow、overflow-x 和 overflow-y 属性会应用于 HTML 元素。

单独的背景

您可以为 HTML 和 BODY 元素指定单独的 background 属性。打开符合标准的模式时,两个背景会同时清楚呈现。这样有助于解决一个常见问题 — background 属性通常在 BODY 元素上定义,但是 BODY 具有默认边距,因此导致在 BODY 元素内容周围只会显示一个很窄的区域。

下面的示例说明了,当您对于 Internet Explorer 6 或更高版本在文档中使用 !DOCTYPE 声明打开符合标准的模式时,相同 HTML 元素如何以不同的方式进行呈现。HTML 元素具有红色背景,BODY 元素指定了高度和宽度。只有在打开符合标准的模式时,您才能看到这些属性的效果。没有打开符合标准的模式时,BODY 元素会充满该窗口,从而使您无法看到 HTML 元素的背景。当您单击该代码片段后面的按钮时,会启动一个带有两个 IFRAME 元素的文档。左侧 IFRAME 元素所指定文档包含的 !DOCTYPE 声明会为 Internet Explorer 6 或更高版本打开符合标准的模式。右侧 IFRAME 元素所指定文档包含的 !DOCTYPE 声明则不会打开符合标准的模式。右侧的 IFRAME 元素还显示了 DIV 元素在更早版本 Internet Explorer 中的呈现方式。

<html style="background:red">
  <head>
    <title>Canvas Comparison</title>
  </head>
  <body style="background:blue; width:200px; height:150px">
    <div style="background:yellow">Who moved my canvas?</div>
  </body>
</html>

注打开符合标准的模式时,如果没有为 HTML 元素指定 background 属性,BODY 元素的 background 则会成为 HTML 元素的 background。这种情况符合 CSS2。

其他属性

本节讲述了 Internet Explorer 6 或更高版本中可用的两个 CSS 属性 — min-height 和 word-spacing。

min-height 属性

min-height 属性会设置或检索一个值,该值指定元素的最小高度。对于 Internet Explorer 6,此属性只应用于固定布局表中的 TD、TH 和 TR 元素。无论文档中的 !DOCTYPE 声明是否打开符合标准的模式,您都可以使用此属性。

元素的 height 默认情况下设置为 auto。使用此默认设置时,元素的高度会进行动态调整。您可以使用 min-height 属性来指定固定布局表中单元格或行的最小高度。

下面的代码片段显示了如何以声明的方式设置 min-height 属性。该固定布局表第一行的最小高度为 100 像素。

<table style="table-layout:fixed">
  <tr style="min-height:100px">
    <th>Row 1, Cell 1</th>
    <th>Row 1, Cell 2</th>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

word-spacing 属性

word-spacing 属性从 Internet Explorer 4.01 开始可在 Macintosh 上使用。从 Internet Explorer 6 开始可在 Microsoft® Win32® 上使用。此设置会设置或检索元素中各个词之间附加间隔的数量。它会在每个词后面都添加一个指定数量的间隔,在这种情况下,可将某个词定义为 Internet Explorer 用来进行断行的标志 — 如空格或连字符。您可以在任何文本容器中设置此属性。

6页,页码:[1] [2] [3] [4] [5] [6] 

上一篇:微软中年危机:盖茨如何教会大象跳舞
下一篇:SQLXML
作者:Lance Silver  来源:MSDN ( 责任编辑:7dspace )
收藏此页】【打印】【关闭
站 内 搜 索
 

热 点 导 读
特 别 推 荐