精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站设计>css教程>正文

Internet Explorer 6 中的 CSS 增强功能 (四)


来源: 时间:06-12-15 点击: 点击这里收藏本文
文介绍了 Microsoft Internet Explorer 6
或更高版本对级联样式表 (CSS) 规范提供的增
强支持。

更多属性值

本节列出了 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 值

9 7 3 1 2 4 8 :

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.