CSS在Internet Explorer 6, 7 和8中的差别(3)

作者:神采飞扬 来源:前端观察 时间:2009-10-26 18:14:00 


属性支持

由position产生的实际大小

示例



#box { position: absolute; top: 0; right: 100px; left: 0; bottom: 200px; background: blue;}

描述

定义top, right, bottom, 和left 值到绝对定位的元素上将给这个元素实际的大小(宽度和高度),虽然并没有设定使宽度和高度值。

支持情况


IE6
No

IE7
Yes

IE8
Yes

Min-Height 与 Min-Width

示例



#box { min-height: 500px; min-width: 300px;}

描述

这两个属性分别指定元素的宽和高的最小值,允许一个盒子可以比指定的最小值更大,但是不能更小。它们两个可以一起使用,也可以分开来用。

支持情况


IE6
No

IE7
Yes

IE8
Yes

Max-Height 和Max-Width

示例



#box { max-height: 500px; max-width: 300px;}

描述

这两个属性分别指定元素的高和宽的最大值,允许一个盒子比这个指定的最大值小,但是不能更大。它们也可以同时使用或者单独使用。

支持情况


IE6
No

IE7
Yes

IE8
Yes

透明边框颜色

示例



#box { border: solid 1px transparent;}

描述

一个透明的边框色允许一个边框和边框色可见(或者不透明)时占用一样的空间。

支持情况


IE6
No

IE7
Yes

IE8
Yes

固定位置元素

示例



#box { position: fixed;}

描述

position属性的这个值允许一个元素绝对的相对于窗口定位。

支持情况


IE6
No

IE7
Yes

IE8
Yes

固定位置的背景图

示例



#box { background-image: url(images/bg.jpg); background-position: 0 0; background-attachment: fixed;}

描述

background-attachment属性的值为fixed允许一个背景图片绝对地相对于窗口定位。

支持情况


IE6
No

IE7
Yes

IE8
Yes

Bugs

就像position:fixed一样,IE6同样不支持background-positon的fixed值 。然而,在IE6中只有在这个值用于根元素的时候才有效。

属性值“inherit”

示例



#box { display: inherit;}

描述

将值inherit 应用到一个属性那个允许一个元素从它的包含元素继承计算的值。

支持情况


IE6
No

IE7
No

IE8
Yes

Bugs

IE6 和IE7 不支持inherit 值除了directionvisibility 属性。

表格单元的边框空白

示例



table td { border-spacing: 3px;}

描述

该属性设置相邻的表格单元的边框之间的空白。

支持情况


IE6
No

IE7
No

IE8
Yes

在表格中渲染空单元格

示例



table { empty-cells: show;}

描述

该属性,只应用于元素的display属性被设置为 table-cell的元素,允许空单元格渲染他们的边框和背景。否则,它们将不可见。

支持情况


IE6
No

IE7
No

IE8
Yes

表格标题的水平位置

示例



table { caption-side: bottom;}

描述

这个属性允许将一个表格的标题放到表格的底部——默认是头部。

支持情况


IE6
No

IE7
No

IE8
Yes

修剪区域

示例



#box { clip:rect(20px, 300px, 200px, 100px)}

描述

该属性指定一个盒子的一个区域可见,剩下的部分修剪掉,或者不可见。

支持情况


IE6
No

IE7
No

IE8
Yes

Bugs

有趣的是,该如果不使用隔开各个值的逗号,IE6和IE7也可以用这个属性。(比如,使用空格隔开剪切的值。)

打印页面中的orphanes和widows

示例



p { orphans: 4;} p { widows: 4;}

描述

orphans属性设定在打印页面底部显示的最少行数。而widows 属性用来设定打印页面头部至少显示的段落的行数。

支持情况


IE6
No

IE7
No

IE8
Yes

盒子内的页面分割

示例



#box { page-break-inside: avoid;}

描述

该属性设定分页是否发生在一个指定元素内。

支持情况


IE6
No

IE7
No

IE8
Yes

Outline 属性

示例



#box { outline: solid 1px red;}

描述

outlineoutline-style, outline-width, 和outline-color的缩写。该属性要优于border属性,因为它不会影响文档流,因而u更有助于调试布局问题。

支持情况


IE6
No

IE7
No

IE8
Yes

display属性的替代值

示例



#box { display: inline-block;}

描述

display 属性通常设置为block, inline, 或none。替代值包括:

  • inline-block

  • inline-table

  • list-item

  • run-in

  • table

  • table-caption

  • table-cell

  • table-column

  • table-column-group

  • table-footer-group

  • table-header-group

  • table-row

  • table-row-group

支持情况


IE6
No

IE7
No

IE8
Yes

处理可折叠空白

示例



p { white-space: pre-line;} div { white-space: pre-wrap;}

描述

white-space属性的pre-line值设定将多个空白元素折叠为一个空白,同时允许明确的设置断行。white-space 属性的pre-wrap 值不会将多个空白折叠为一个,不过也允许明确的设置断行。

支持情况


IE6
No

IE7
No

IE8
Yes

标签:CSS,IE6,IE7,IE8,区别
0
投稿

猜你喜欢

  • ASP新闻分页,将一篇过长的文章分页,生成静态页面

    2011-04-10 11:14:00
  • 使用mysqli完成事务处理

    2011-03-29 15:49:00
  • SWF FLASH的param属性参数详解

    2008-10-25 15:12:00
  • MySQL安全性指南 (2)

    2010-07-26 13:26:00
  • 文本框textarea限制输入文字个数的方法

    2008-01-28 13:02:00
  • Access为后台数据库的网站统计系统

    2008-11-16 17:34:00
  • 优化 MySQL 语句的十个建议

    2012-05-08 07:14:36
  • MSSQL中部分字段重复数据的删除方法

    2008-12-29 13:59:00
  • asp如何做一个随机密码产生器?

    2010-07-12 18:57:00
  • 大家都对vertical-align的各说各话

    2008-06-19 12:11:00
  • 通过视图修改数据时所应掌握的基本准则

    2009-01-07 14:22:00
  • WEB界面设计五种特征

    2010-03-16 12:34:00
  • asp如何显示已在数据库编码了的相对应的记录?

    2010-06-09 18:44:00
  • 用户体验设计中用到的统计学方法

    2009-07-12 08:26:00
  • CSS pointer-events下层元素被点击

    2010-04-11 22:31:00
  • asp检测文件编码方法

    2007-10-03 14:27:00
  • 一个用JavaScript写的本周是本学期第几周的程序

    2009-03-09 12:49:00
  • 关于浏览器的一些观点

    2008-08-06 12:48:00
  • 【启发】不用循环计算1到100的和

    2009-03-04 12:16:00
  • 在ASP中使用SQL语句之2:用WHERE子句设置查询条件

    2009-04-21 13:03:00
  • asp之家 网络编程 m.aspxhome.com