IE6, IE7 和 IE8 的 CSS 差异

Print
Friday, 16 October 2009 00:55  

选择符和继承

子选择符

示例
body>p {
 	color: #fff; 
}
描述

子选择符选择指定元素的所有直接子元素. 在上述示例中, body 为父元素, p 为子元素.

支持
IE6
否
IE7
是
IE8
是
Bugs

在 IE7 中, 如果在父子元素间有其它元素, 该选择符无效.

链类 (chained classes)

示例
.class1.class2.class3 {
 	background: #fff; 
}
描述

同一HTML元素声明了多个类时会使用此类, 如:

<div class="class1 class2 class3">
 <p>Content here.</p> 
</div>
支持
IE6
否
IE7
是
IE8
是
Bugs

IE6 好像支持此属性, 因为它将链中的最后一个类匹配给了有该类的元素, 然而它并没有像其应该表现的那样,将类限制到有链中所有类的元素.

属性选择符

示例
a[href] {
 	color: #0f0; 
}
描述

该选择符的目标元素为有指定属性的元素. 在上述示例中, 所有有 href 属性的锚标签都能满足, 但没有 href 属性的标签都不会被满足.

支持
IE6
否
IE7
是
IE8
是

相邻兄弟选择符

示例
h1+p {
 	color: #f00; 
}
描述

该选择符的目标为邻近指定元素的兄弟元素. 上述示例的目标为所有紧随 h1 的段落标签, 举例如下:

<h1>heading</h1>
<p>Content here.</p>
<p>Content here.</p>

在上述代码中, 指定的 CSS 只会作用于第一个段落, 因为它是 <h1> 的邻近的兄弟标签. 第二个标签也是兄弟标签, 但不是邻近的.

支持
IE6
否
IE7
是
IE8
是
Bugs

在 IE7 中, 若兄弟标签间有 HTML 注释, 则该选择符不会起作用.

一般兄弟选择符

示例
h1~p {
 	color: #f00; 
}
描述

该选择符的目标为指定元素后的所有兄弟元素. 在前面的示例中应用该选择符会选中所有两个段落标签, 但 h1 标签之前的段落将不会适用此选择符.

支持
IE6
否
IE7
是
IE8
是

伪类和伪元素

:hover 伪类后的子选择符

示例
a:hover span {
 	color: #0f0; 
}
描述

在 :hover 伪类后也可将选择符作用到元素, 和所有子选择符的工作原理类似. 上述示例将会在鼠标悬停于锚上时改变所有 <span> 元素里的字体的颜色.

支持
IE6
否
IE7
是
IE8
是

链式伪类

示例
a:first-child:hover {
 	color: #0f0; 
}
描述

伪类可成链使用以收缩选择范围. 上述示例的目标为每个为长子的锚标签, 对其应用 hover 类.

支持
IE6
否
IE7
是
IE8
是

非锚元素的 :hover

示例
div:hover {
 	color: #f00; 
}
描述

:hover 可用于悬停或滚过状态, 且可用于任何元素.

支持
IE6
否
IE7
是
IE8
是

:first-child 伪类

示例
div li:first-child {
 	background: blue; 
}
描述

此伪类的目标为指定元素的所有第一个子元素.

支持
IE6
否
IE7
是
IE8
是
Bugs

在 IE7 中, 若第一子元素前有 HTML 注释, 则该伪类不起作用.

:focus 伪类

示例
a:focus {
 	border: solid 1px red; 
}
描述

该伪类的目标为任何被聚焦到的元素.

支持
IE6
否
IE7
否
IE8
是

:before 和 :after 伪元素

示例
#box:before {
 	content: "This text is before the box"; 
} 

#box:after {
 	content: "This text is after the box"; 
}
描述

该伪元素和 content 属性联合使用, 会将产生的内容放置到指定的元素之前或之后.

支持
IE6
否
IE7
否
IE8
是

属性支持

位置决定的虚拟维数

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

给绝对定位的元素指定上, 右, 下, 左的值将赋予元素 "虚拟" 维数 (宽度和高度), 即便宽度和高度并未指定.

支持
IE6
否
IE7
是
IE8
是

Min-Height 和 Min-Width

示例
#box {
 	min-height: 500px;
 	min-width: 300px; 
}
描述

这些属性指定了高度或宽度的最小值, 允许盒子更大, 但不可以比指定的最小值再小. 可将二属性结合使用或分别使用.

支持
IE6
否
IE7
是
IE8
是

Max-Height 和 Max-Width

示例
#box {
 	max-height: 500px;
 	max-width: 300px; 
}
描述

这些属性指定了高度或宽度的最大值, 允许盒子更小, 但不可以比指定的最大值再大. 可将二属性结合使用或分别使用.

支持
IE6
否
IE7
是
IE8
是

透明边框颜色

示例
#box {
 	border: solid 1px transparent; 
}
描述

透明边框颜色允许边框占用和可见时同样的空间.

支持
IE6
否
IE7
是
IE8
是

位置固定元素

示例
#box {
 	position: fixed; 
}
描述

position 属性的这个值允许将元素相对于基准点绝对定位.

支持
IE6
否
IE7
是
IE8
是

相对于基准点对背景进行绝对定位

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

background-attachment 属属的 fixed 值允许背景图片相对于基点绝对定位.

支持
IE6
否
IE7
是
IE8
是
Bugs

该属性在 IE6 仅适用于根元素.

属性值 “inherit”

示例
 #box {
 	display: inherit;
 }
描述

将 inherit 应用到属性上允许元素继承其上级元素该属性的值.

支持
IE6
否
IE7
否
IE8
是
Bugs

IE6 和 IE7 不支持该值, 除非将该值应用到 direction 和 visibility 属性.

表格单元格边框间的空间

示例
table td {
 	border-spacing: 3px; 
}
描述

该属性设定了表格相邻单元格边框之间的空间.

支持
IE6
否
IE7
否
IE8
是

表格中空单元格的显示方式

示例
table {
 	empty-cells: show; 
}
描述

该属性只能作用于将 display 属性设为 table-cell 的元素, 允许空单元格要么带边框和背景显示, 要么全都隐藏.

支持
IE6
否
IE7
否
IE8
是

表格标题的垂直位置

示例
table {
 	caption-side: bottom; 
}
描述

该属性允许表格标题在表格底部, 而非顶部(缺省值), 显示.

支持
IE6
否
IE7
否
IE8
是

区域裁剪

示例
#box {
     clip: rect(20px, 300px, 200px, 100px) 
}
描述

该属性指定了盒子中的可见区域, 其余区域将会被 "裁剪掉", 也就是不可见.

支持
IE6
否
IE7
否
IE8
是
Bugs

该属性在 IE6 和 IE7 中不使用逗号时起作用.

Orphaned and Widowed Text in Printed Pages

示例
p {
 	orphans: 4; 
}  
p {
 	widows: 4; 
}
描述

The orphans property specifies the minimum number of lines to display at the bottom of a printed page. The widows property specifies the minimum number of lines to display at the top of a printed page.

支持
IE6
否
IE7
否
IE8
是

Page Breaks Inside Boxes

示例
#box {
 	page-break-inside: avoid; 
}
描述

This property specifies whether a page break should occur inside of a specified element or not.

支持
IE6
否
IE7
否
IE8
是

Outline Properties

示例
#box {
 	outline: solid 1px red; 
}
描述

outline is the shorthand property that encompasses outline-style, outline-width, and outline-color. This property is preferable to the border property since it does not affect document flow, thus better aiding debugging of layout issues.

支持
IE6
否
IE7
否
IE8
是

Alternative Values for the Display Property

示例
#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
否
IE7
否
IE8
是

Handling of Collapsible Whitespace

示例
p {
 	white-space: pre-line; 
}  
div {
 	white-space: pre-wrap; 
}
描述

The pre-line value for the white-space property specifies that multiple whitespace elements collapse into a single space, while allowing explicitly set line breaks. The pre-wrap value for the white-space property specifies that multiple whitespace elements do not collapse into a single space, while allowing explicitly set line breaks.

支持
IE6
否
IE7
否
IE8
是

Other Miscellaneous Techniques

Media Types for @import

示例
@import url("styles.css") screen;
描述

A media type for an imported style sheet is declared after the location of the style sheet, as 在上述示例中. In this example, the media type is "screen".

支持
IE6
否
IE7
否
IE8
是
Bugs

Although IE6 and IE7 support @import, they fail when a media type is specified, causing the entire @import rule to be ignored.

Incrementing of Counter Values

示例
h2 {
 	counter-increment: headers; 
}  
h2:before {
 	content: counter(headers) ". "; 
}
描述

This CSS technique allows auto-incrementing numbers to appear before specified elements, and is used in conjunction with the before pseudo-element.

支持
IE6
否
IE7
否
IE8
是

Quote Characters for Generated Content

示例
q {
 	quotes: "'" "'"; 
}  
q:before {
 	content: open-quote; 
}  
q:after {
 	content: close-quote; 
}
描述

Specifies the quote characters to use for generated content applied to the q (quotation) tag.

支持
IE6
否
IE7
否
IE8
是

重要 Bug 和不兼容特性

下面是各种发生于 IE6 和 IE7 但前面未作描述的 bug 的简单描述. 此列表不包含对三种浏览器都缺乏支持的项目.

IE6 Bugs

  • 不支持 <abbr>元素的样式
  • 不支持以 - 或 _ 开头的 class 和 ID
  • <select> 总显示在最顶部, z-index 值不起作用
  • :hover 伪类会被忽略 if anchor 伪类es are not in the correct order (:link, :visited, :hover)
  • An !important declaration on a property is overridden by a 2nd declaration of the same property in the same rule set that doesn't use !important
  • height behaves like min-height
  • width behaves like min-width
  • Left and right margins are doubled on floated elements that touch their parents' side edges
  • Dotted borders appear identical to dashed borders
  • line-through value for text-decoration property appears higher on the text than on other browsers
  • List items for an ordered list that have a layout will not increment their numbers, leaving all list items preceded by the number "1"
  • List items don't support all possible values for list-style-type
  • List items with a specified list-style-image will not display the image if they are floated
  • Offers only partial support for @font-face
  • Some selectors will wrongly match comments and the doctype declaration
  • If an ID selector combined with a class selector is unmatched, the same ID selector combined with different class selectors will also be treated as unmatched

IE7 Bugs

  • List items for an ordered list that have a layout will not increment their numbers, leaving all list items preceded by the number "1"
  • List items don't support all possible values for list-style-type
  • List items with a specified list-style-image will not display the image if they are floated
  • Offers only partial support for @font-face
  • Some selectors will wrongly match comments and the doctype declaration

一些这里没有提到的其它 bug, 不一定是 bug. 请参阅相关文档.

< Previous   Next >