正 文

Internet Explorer 6 中的 CSS 增强功能


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


更多属性值

本节列出了 Internet Explorer 6 或更高版本所支持、但更早版本 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 属性。
 
• 如果只有一个属性的值为 auto,则会调整该属性。
 
• 如果 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 中的呈现方式。

<body>
  <div style=""></div>
  <div style="width:50%; margin-left:0px"></div>
  <div style="width:50%; margin-right:auto"></div>
  <div style="width:50%; margin-left:auto"></div>
  <div style="width:50%; margin-left:auto; margin-right:auto"></div>
</body>

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,未打开符合标准的模式时,此属性会应用到所有可见元素。

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

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

热 点 导 读
特 别 推 荐