Internet Explorer 6 中的 CSS 增强功能
Internet Explorer 6 中的 CSS 增强功能更新日期： 1/17/2005Lance Silver
Microsoft Corporation
摘要：本文介绍了 Microsoft Internet Explorer 6 或更高版本对级联样式表 (CSS) 规范提供的增强支持。
前提条件：本文假设您熟悉 HTML 和 CSS。
要查看本文中的示例，必须在系统上安装 Internet Explorer 6 或更高版本。您可以从 http://www.microsoft.com/windows/ie/default.htm 下载 Internet Explorer 6。
简介
!DOCTYPE“开关”
在框内部完成一切任务
谁移动了我的画布？
其他属性
更多属性值
更严格的样式表分析
还有更多的新功能呢
原来怎样
简介Microsoft® Internet Explorer 6 及更高版本支持一些更早版本 Internet Explorer 并不支持的 CSS 功能。支持的两个附加 CSS 属性为 min-height 和 word-spacing。还支持几个其他的可能值，其中包括 white-space 属性的 pre 值，以及 display 属性的 list-item 值。其他重要功能包括更加严格的样式表分析，以及更改哪些 HTML 元素可以表示文档内容可呈现到其中的最外部表面。
这些增强功能设计为符合 CSS 规范。CSS 中定义的所有属性、值和功能，以及 Level 1 (CSS1) 规范均受支持，其中包括定义如何对元素及其相关 margin、border 和 padding 属性进行度量和格式设置的框模型。
但真正的优点在于，即使有了所有这些增强功能，也不会与您为更早版本 Internet Explorer 开发的应用程序之间出现任何明显的兼容性问题。
!DOCTYPE 声明是一个标准通用标记语言 (SGML) 声明，它指定了文档（理论上）遵守的文档类型定义 (DTD)。它看起来像一个不带结束标记的 HTML 标记，但是它以一个惊叹号 (!) 开头，并且包含的只是单个标记，而不是属性名称值对。此声明必须位于文档的开头，且在 HTML 标记的前面。
通过在文档开头部分包括 !DOCTYPE 声明，并在该声明中指定一个有效的 Label（在某些情况下还会指定 Definition 和/或 URL），可以打开符合标准的模式。Label 指定 DTD 的唯一名称，后面可以附加该 DTD 的版本号。Definition 指定在 Label 中所指定的 DTD 的定义。URL 则指定该 DTD 的位置。
在 HTML 4.0 规范中指定了三个 Definition — Frameset、Transitional 和 Strict。Frameset 用于 FRAMESET 文档，Transitional 包含了除 FRAMESET 文档之外的所有文档，Strict “排除了万维网联合会 (W3C) 预期将随着样式表支持的成熟而逐渐弃用的表示属性和元素”£¨HTML 4.0 规范的说法）。
下表显示了对于 Internet Explorer 6 或更高版本，!DOCTYPE 声明的哪些值会打开符合标准的模式。
Label
Definition
存在 URL
不存在 URL
!DOCTYPE 声明时，当声明中的 Label 不指定 HTML 规范版本时，或者它指定的版本早于 HTML 4.0 时，符合标准的模式是关闭的。该表显示出，如果您在 !DOCTYPE 声明中指定了 HTML 4.0 的 Frameset 或 Transitional Definition，则只有当您包括 URL 时才会打开符合标准的模式。当您在 !DOCTYPE 声明中指定 HTML 4.0 的 Strict Definition，以及指定不带任何 Definition 的 HTML 4.0 时，也会打开符合标准的模式。
为了允许创建新的 DTD（如 HiDad 11.22），当 !DOCTYPE 声明不可识别时，会打开符合标准的模式。当您指定了上表没有列出的 HTML 版本（如 HTML 1.0 或 HTML 3.22）时，也会打开符合标准的模式。
!DOCTYPE 示例
本节中的示例显示了如何使用 !DOCTYPE 声明来指定文档要遵守的 DTD，以及如何打开符合标准的模式。
下面示例中的两个声明都指定为遵守 Transitional HTML4.0 DTD。第二个声明指定了该 DTD 的 URL。第一个声明则没有指定该内容。第二个声明对于 Internet Explorer 6 或更高版本打开了符合标准的模式。第一个声明则没有打开该模式。
下面示例中的两个声明都指定为遵守 HTML 4.0 DTD。第一个声明没有指定 Definition。第二个声明指定了此 DTD 的 Strict Definition。两个声明都没有指定 URL.。两个声明都打开了符合标准的模式。
CSS1 框模型将内容定义在一个 HTML 元素中，就好像它周围有一个不可见的矩形边框一样。这个边框周围有三个矩形地带，分别以 margin、border 和 padding 属性表示。您可以使用样式表来对该边框及其周围地带的大小和外观进行操作。
更早版本的 Internet Explorer 计算 width 和 height 属性的方式不遵守 CSS1 框模型。在 CSS1 中，width 属性定义为元素内容周围左边框和右边框之间的距离。与之相似，height 属性在 CSS1 中则定义为上边框和下边框之间的距离。然而，对于更早版本的 Internet Explorer，width 和 height 属性还包括该元素边框周围的 border 和 padding 地带。下图说明了这个区别。
与更早版本间 width 和 height 属性计算方式的区别的图示说明
符合的行为
对于 Internet Explorer 6 或更高版本而言，当您使用 !DOCTYPE 声明打开符合标准的模式时，width 和 height 属性分别指定左、右边框，以及上、下边框之间的距离。不包括 border 和 padding 地带。
不符合的行为
当 !DOCTYPE 声明没有打开符合标准的模式时，正如更早版本的 Internet Explorer 一样，width 属性包括该对象的内容框，加上下列属性的值：border-left、border-right、padding-left 和 padding-right。width 属性值减去这些属性值的和，等于父对象内容框的宽度。与之相似，height 属性值减去 border-top、border-bottom、padding-top 和 padding-bottom 属性值的和，等于父对象内容框的高度。
框模型示例
本节中的示例说明了，当您对于 Internet Explorer 6 或更高版本在文档中使用 !DOCTYPE 声明打开符合标准的模式时，相同 HTML 元素是如何以不同方式呈现的。
下面 HTML 代码片段中 DIV 元素的 width 和 height 均为 200 像素，border-width 为 50 像素。当您单击该代码片段后面的按钮时，会启动一个带有两个 IFRAME 元素的文档。左侧 IFRAME 元素所指定文档包含的 !DOCTYPE 声明会为 Internet Explorer 6 或更高版本打开符合标准的模式。右侧 IFRAME 元素所指定文档包含的 !DOCTYPE 声明则不会打开符合标准的模式。右侧的 IFRAME 元素还显示了 DIV 元素在更早版本 Internet Explorer 中的呈现方式。
请显示该示例。
TABLE 元素
对于更早版本的 Internet Explorer，CSS1 框模型语义用于计算自动布局表中 TD 和 TH 元素的 width 属性，但是不用于计算这些元素的 height 属性。在更早版本的 Internet Explorer 中，固定布局表不使用 CSS1 语义。
注默认情况下为自动布局表。要创建固定布局表，请将TABLE 元素的 table-layout 属性设置为 fixed。固定布局表的优点在于，它们的呈现速度比自动布局表的呈现速度快。
IMG 元素
CSS1 框模型语义在更早版本的 Internet Explorer 中还用于计算 IMG 元素的 width 和 height 属性。但是，padding 不适用于更早版本 Internet Explorer 中的 IMG 元素。
在更早版本的 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 元素指定 background 属性，BODY 元素的 background 则会成为 HTML 元素的 background。这种情况符合 CSS2。
min-height 属性
min-height 属性会设置或检索一个值，该值指定元素的最小高度。对于 Internet Explorer 6，此属性只应用于固定布局表中的 TD、TH 和 TR 元素。无论文档中的 !DOCTYPE 声明是否打开符合标准的模式，您都可以使用此属性。
元素的 height 默认情况下设置为 auto。使用此默认设置时，元素的高度会进行动态调整。您可以使用 min-height 属性来指定固定布局表中单元格或行的最小高度。
下面的代码片段显示了如何以声明的方式设置 min-height 属性。该固定布局表第一行的最小高度为 100 像素。
word-spacing 属性
word-spacing 属性从 Internet Explorer 4.01 开始可在 Macintosh 上使用。从 Internet Explorer 6 开始可在 Microsoft® Win32® 上使用。此设置会设置或检索元素中各个词之间附加间隔的数量。它会在每个词后面都添加一个指定数量的间隔，在这种情况下，可将某个词定义为 Internet Explorer 用来进行断行的标志 — 如空格或连字符。您可以在任何文本容器中设置此属性。
margin 和 width 属性的 auto 值
margin 和 width 属性的 auto 值指定，当元素的宽度超过限制时（即样式规则发生重叠或发生冲突时），调整这些属性中的哪个属性。当文档中的 !DOCTYPE 声明为 Internet Explorer 6 或更高版本打开符合标准的模式时，您可以使用此值。
非浮动、块级别元素的水平位置和宽度是由该元素的 margin, border、padding 和 width 属性指定的。对于任何这样的元素，这些属性（左和右）值的和都等于包含它的块元素的宽度；宽度是从容器块继承的。
无法通过更改容器块中元素的 margin、border、padding 或 width 属性值，来更改这个容器块的宽度。当您为某个元素的一个或多个这类元素指定值时，可能必须对其他属性进行调整，这样才能使得该元素的总宽度不会超过容器的宽度。该宽度可能会超出限制。
根据 CSS1，margin 和 width 值可以调整；border 和 padding 值不可调整。只有 margin 和 width 属性可以为 auto。如果 width 属性的指定值导致该元素的宽度超出限制，则可以调整其中一个 margin 属性，如果一个或多个 margin 属性导致该元素的宽度超出限制，则可以调整 width 属性。
下面的规则决定了当元素宽度超出限制时，会调整哪个属性。
•
direction 属性的值为 ltr，则会忽略为 margin-right 指定的值，该值会进行调整。如果 direction 的值为 rtl，则会调整 margin-left 属性。
•
•
width 设置为 auto，则任何其他 auto 值都变为 0，width 则采用所生成等式的结果。
•
margin-left 和 margin-right 都为 auto，它们的计算值则相等。
Auto 示例
下面的示例说明了，当您对于 Internet Explorer 6 或更高版本在文档中使用 !DOCTYPE 声明打开符合标准的模式时，相同元素如何以不同的方式进行呈现。
无论是否打开符合标准的模式，下列 HTML 代码段中前三个 DIV 元素都以相同方式呈现。第一个 DIV 元素没有指定 width 和 margin 属性，因此它的 width 为 100%，而且没有左边距和右边距。第二个 DIV 元素指定了 width 和 margin-left 属性，因此会调整 margin-right 属性。第三个 DIV 元素指定了 width 属性，并且其 margin-right 属性设置为 auto，因此会调整其 margin-right 属性。
第四个和第五个 DIV 元素都指定了 width 属性，并且它们的一个或多个 margin 属性设置为 auto。只有打开符合标准的模式时，您才能看到这些属性的效果。没有打开符合标准的模式时，DIV 元素的呈现方式就好像它们的 margin-left 属性设置为 0px，并且/或者它们的 margin-right 属性设置为了 auto 一样。
当您单击该代码片段后面的按钮时，会启动一个带有两个 IFRAME 元素的文档。左侧 IFRAME 元素所指定文档包含的 !DOCTYPE 声明会为 Internet Explorer 6 或更高版本打开符合标准的模式。右侧 IFRAME 元素所指定文档包含的 !DOCTYPE 声明则不会打开符合标准的模式。右侧的 IFRAME 元素还显示了 DIV 元素在更早版本 Internet Explorer 中的呈现方式。
display 属性的 list-item 值
display 属性使您能够控制元素的基本形状或类型，以及是否呈现这些元素。display 属性的 list-item 值使您能够将任何元素都变为一个列表项，即一个带有列表标记的块级元素。其 display 属性设置为 list-item 的元素所支持的 CSS 属性与 LI 元素支持的 CSS 属性相同 — 就是说，除了应用于块元素的普通属性之外，还支持下列属性：list-style、list-style-type、list-style-image 和 list-style-position。
LI 元素的编号语义与其他 display 属性设置为 list-item 的块元素的编号语义不同。LI 元素会离从它们最近的容器 OL 或 UL 元素获取其索引。其他块元素则从它们父元素的 children 集合获取其索引。对 display 属性的 list-item 值的支持不会更改 LI 元素的索引。
无论是否打开符合标准的模式，此值都可用。
white-space 属性的 pre 值
white-space 属性使您能够控制元素中的空格和换行符。对于 Internet Explorer 6 或更高版本，当您使用 !DOCTYPE 声明打开符合标准的模式时，pre 值会导致源中的空格和换行符被保留。源中的换行符和 TAB 字符（“\n”和“\t”）也会被保留。连续的空格不会进行重叠。此值会导致某个对象中内容的布局方式与 PRE 元素非常类似。此值不仅影响内容的显示，而且会影响通过 W3C Document Object Model (DOM) 访问的内容。
关闭符合标准的模式时，您可以检索此值，而不会影响呈现。它的运行方式与 normal 值类似。
注当您打开符合标准的模式时，white-space 属性仅应用于块级元素，如 DIV 元素。对于 Internet Explorer 5.5，未打开符合标准的模式时，此属性会应用到所有可见元素。
当您使用 !DOCTYPE 声明打开符合标准的模式时，Internet Explorer 6 或更高版本会忽略不符合 CSS1 的样式表声明。更早版本的 Internet Explorer 允许您使用某些无效的声明，如在一个十六进制 RGB 值的开头遗漏了前导“#”符号。
样式表中的注释
根据 CSS1，您可以在样式表中使用文本注释，这种注释与 C 编程语言中使用的注释相似。C 语言注释以“/*”开始，以“*/”结束。对于更早版本的 Internet Explorer，您可以在样式表中使用 C 语言注释，也可以使用 HTML 注释。HTML 注释以“”结束。
下面的示例显示了 C 语言注释与 HTML 注释的区别。
当您使用文档中的 !DOCTYPE 声明打开符合标准的模式时，对于 Internet Explorer 6 或更高版本，只允许 C 语言注释，但是有一点例外。那就是，您可以将样式表规则包含在一个 HTML 注释中。样式表可以包含在 HTML 注释块中，这样是为了让低级别的浏览器不会显示样式表中的文本。下面的示例演示了 HTML 注释在一个嵌入式样式表中唯一可接受的用法。
速记属性中的不可识别标记
根据 CSS1，当一个速记属性中存在不可识别标记时，整个速记属性设置都会被忽略。例如，"text-decoration: underline cross-out" 会被忽略，这就是因为“cross-out”是 text-decoration 属性的不可识别值。文本甚至不会添加下划线。
对于更早版本的 Internet Explorer，声明的分析在遇到第一个不可识别值时结束。因此，"text-decoration: underline cross-out overline" 可以使得文本添加下划线，但是不会添加上划线。上述情况会影响下列属性：font、background、background-position、text-decoration、margin、padding、border、border-top、border-right、border-bottom、border-left、border-color、border-width、border-style、list-style-image、list-style、clip、behavior、text-autospace 和 layout-grid。
部分字体属性设置
根据 CSS1，font 声明必须至少指定 font-size 和 font-family。例如，因为 "font: 14pt" 虽然具有 font-size，但是没有 font-family，所以它会被忽略。更早版本的 Internet Explorer 接受部分字体设置。
RGB 颜色缺少“#”字符
根据 CSS1，使用十六进制 RGB 值指定的颜色必须带有一个前导“#”符号。与更早版本的 Internet Explorer 一样，像 "FFFFFF" 这样的值会被忽略，而不会将其按照 "#FFFFFF" 进行处理（也称为 white）。上述情况会影响接受颜色值的所有属性。
缺少单位类型标识符会被视为像素值
根据 CSS1，长度值必须指定一个单元类型标识符，如 cm、mm、in、pt、pc 或 px。不带单位类型标识符的值，以及数字和单位类型标识符之间存在空格的值会被忽略。更早版本的 Internet Explorer 会将不带任何单位类型标识符的数字视为像素单位 — 就好像在该字符串后面附加了“px”一样。
在下面的示例中，当 !DOCTYPE 声明打开符合标准的模式时，两个属性都会被忽略。第一个属性之所以被忽略，是因为没有单位属性标识符。第二个属性被忽略则是因为数字和单位类型标识符之间存在空格。更早版本的 Internet Explorer 处理第一个属性的方式就好像该数字后面附加了“px”一样。第二个属性中数字和单位类型标识符之间的空格会被更早版本的 Internet Explorer 忽略。
注此规则有一个例外。line-height 会显式接受不带单位的数字，并且将其按照与百分比设置相似的方式进行处理。例如，"line-height: 2" 与 "line-height: 200%," 相似，只是数字继承方式有所区别。
带引号的关键字
根据 CSS1，样式表中的关键字标记不能加引号，例如，按名称指定的颜色（如 "red,"）或已知属性值（如 "small-caps,"）。在下面的示例中，这两个属性都会被忽略。更早版本的 Internet Explorer 会忽略引号，并应用这些关键字标记。
注脚本语言在字符串两边仍然需要加引号。
以数字开头的 CLASS 和 ID 值
根据 CSS1，CLASS 或 ID 属性的值不能以数字 (0-9) 开头。更早版本的 Internet Explorer 允许这些值以数字开头。
区分大小写的 CLASS 和 ID 值
根据 HTML 4.0，CLASS 和 ID 属性的值区分大小写。
font-variant 属性的 small-caps 值
font-variant 属性的 small-caps 值会产生“小体大写字母”的效果。该元素中的所有字母均大写，原始文本中本来为小写的字母会比原来为大写的字母小。在更早版本的 Internet Explorer 中，small-caps 值则对该元素中的所有字符均应用相同的字体大小。
IMG 元素上的填充
在 IMG 元素上支持填充属性，如 padding、padding-bottom、padding-top、padding-left 和 padding-right。更早版本的 Internet Explorer 不支持 IMG 元素的 padding 属性。
Font-size 属性的关键字值
font-size 属性的 medium 值与默认的普通字体大小相匹配。
此属性的关键字值包括 xx-small、x-small、small、medium、large、x-large 和 xx-large。对于更早版本的 Internet Explorer，这些值不是直观定义的。medium 值不是默认的普通字体大小；默认为 small。
TABLE 元素继承文本属性
TABLE 元素会从其父元素继承文本属性值。这些属性包括 color、font-size、font-weight、font-style、font-variant、text-decoration、text-transform、letter-spacing 和 line-height。对于更早版本的 Internet Explorer，除 font-family 属性之外的 TABLE 元素的所有文本属性会将所有文本属性设置为 BODY 元素的设置。
注 TABLE元素的 font-family 属性在 Internet Explorer 3 及更高版本中会进行继承。
嵌入式元素的宽度和高度
嵌入式元素（如 SPAN、B 和 I）不支持 width 或 height 属性。打开符合标准的模式时，如果您想设置嵌入式元素的 width 或 height 属性，则必须将该元素的 display 属性设置为 inline-block。
字符转义
根据 CSS1，您可以使用反斜杠 (\) 作为转义符。这样会使得转义符后面的字符失去任何意义。例如，您可以按照下列方式转义引号字符：
您还可以使用十六进制值转义 Unicode 字符。例如，“\0009”是 tab 字符的转义符。
当 Internet Explorer 6 或更高版本未处于符合标准的模式时，它处于兼容性 模式。如果您针对更早版本的 Internet Explorer 开发了应用程序，并且希望这些应用程序在 Internet Explorer 6 或更高版本上以相同方式呈现，则请确保 !DOCTYPE 声明没有打开符合标准的模式。
在符合标准的模式中，不能保证与其他版本 Internet Explorer 的兼容性。打开符合标准的模式时，文档的呈现行为可能与将来版本的 Internet Explorer 不同。对于性质固定的内容（如存储在 CD 上的内容），您不应该使用此模式。
其他信息
CSS1 测试套件
Compatibility in Internet Explorer 5.5
Measuring Element Dimension and Location
Positioning
Lance Silver 是 Windows Client SDK 小组的编程人员/撰稿人。他如果没在折磨那些编辑、开发人员、测试人员或者程序管理员，那就是在带着他的孩子 Rachel 和 George 在西北部某个景色优美的河边钓大马哈鱼和虹鳟鱼。（人人都希望他花更多时间来钓鱼。）
