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
值除了direction
和visibility
属性。
表格单元的边框空白
示例
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;}
描述
outline
是outline-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