CSS 兼容性和 Internet Explorer(来源于:微软MSDN)

随着每个新版本的 Windows Internet Explorer 的发布,对级联样式表 (CSS) 标准的支持也在稳步提高。 Internet Explorer 6 是第一个完全符合 CSS 级别 1 规范的 Internet Explorer 版本。 Windows Internet Explorer 8 完全符合 CSS 级别 2 修订 1 (CSS 2.1) 规范,并支持某些 CSS 级别 3 (CSS 3) 的功能。

如果您的网站面向的浏览器包括早期版本的 Internet Explorer,则您需要知道这些版本符合的 CSS 级别规范。 本文简述了各个最近的 Internet Explorer 版本的 CSS 合规性(包括 Internet Explorer 8 中提供的支持)。

注意 Internet Explorer 8 中新增的 CSS 功能仅当您的页面在 IE8 模式(或更高版本)中呈现时可用。 通过在您页面的标题部分中包含以下 meta 标记,可以确保您的页面以 IE8 模式显示:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

有关文档兼容性模式的更多信息,请参见“定义文档兼容性”。

本文以 MSDN 上的 CSS 参考文档(可能为英文网页)为基础且结构较为松散。 本文包含以下各节:

简介

每个表均列出了最近的 Internet Explorer 版本中分组 CSS 功能的支持状态信息。 在每一节中,第一个表表示 CSS 2.1 或早期版本中引入的功能,第二个表表示万维网联合会 (W3C) 为 CSS 3 规划的功能。

单元格中的值“是”表示在相应版本的 Internet Explorer 中实现了该功能。

单元格中的值“部分”表示只在相应版本的 Internet Explorer 中部分实现了该功能。 有关更多信息,请单击链接查看 MSDN 上该功能的参考页。

单元格中的值“否”表示未在相应版本的 Internet Explorer 中实现该功能。

At 规则

CSS 2.1:

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

@charset

否

是

是

是

是

@import

是

是

是

是

是

@media

否

是

是

是

是

@page

部分

部分

部分

部分

是

CSS 3:

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

@font-face

否

是

是

是

是

@namespace

否

否

否

否

否

选择器

元素选择器

CSS 2.1:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

.value { sRules }

类(请参见注释)

部分

部分

部分

是

是

#value { sRules }

ID

是

是

是

是

是

E { sRules }

类型

是

是

是

是

是

* { sRules }

通用

否

否

否

是

是

注释 在 Internet Explorer 7 之前的版本中,每个元素只能有两个类选择器。

CSS 3:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

ns|E { sRules }

已指定命名空间

否

否

否

否

否

属性选择器

CSS 2.1:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

[att=val] { sRules }

相等 [=]

否

否

否

是

是

[att] { sRules }

存在 []

否

否

否

是

是

[att|=val] { sRules }

连字符 [|=]

否

否

否

是

是

[att~=val] { sRules }

空白 [~=]

否

否

否

是

是

CSS 3:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

[ns|attr] { sRules }

已指定命名空间

否

否

否

是

是

[att^=val] { sRules }

前缀 [^=]

否

否

否

是

是

[att*=val] { sRules }

子字符串 [*=]

否

否

否

是

是

[att$=val] { sRules }

后缀 [$=]

否

否

否

是

是

连结符

CSS 2.1:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

E+F { sRules }

相邻同级 (+)

否

否

否

是

是

E>F { sRules }

子级 (>)

否

否

否

是

是

EF { sRules }

后代

是

是

是

是

是

CSS 3:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

E~F { sRules }

常规同级 (~)

否

否

否

是

是

伪类

CSS 2.1:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

:active { sRules }

:active

否

否

否

部分

是

:first-child { sRules }

:first-child

否

否

否

是

是

:focus { sRules }

:focus

否

否

否

否

是

:hover { sRules }

:hover

部分

部分

部分

是

是

:lang(C) { sRules }

:lang()

否

否

否

否

是

:link { sRules }

:link

是

是

是

是

是

:visited { sRules }

:visited

是

是

是

是

是

@page :first { sRules }

@page :first

否

否

否

否

是

@page :left { sRules }

@page :left

否

否

否

否

是

@page :right { sRules }

@page :right

否

否

否

否

是

CSS 3:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

:root { sRules }

:root

否

否

否

否

否

:nth-child() { sRules }

:nth-child()

否

否

否

否

否

:nth-last-child() { sRules }

:nth-last-child()

否

否

否

否

否

:nth-of-type() { sRules }

:nth-of-type()

否

否

否

否

否

:nth-last-of-type() { sRules }

:nth-last-of-type()

否

否

否

否

否

:last-child { sRules }

:last-child

否

否

否

否

否

:first-of-type { sRules }

:first-of-type

否

否

否

否

否

:last-of-type { sRules }

:last-of-type

否

否

否

否

否

:only-child { sRules }

:only-child

否

否

否

否

否

:only-of-type { sRules }

:only-of-type

否

否

否

否

否

:empty { sRules }

:empty

否

否

否

否

否

:target { sRules }

:target

否

否

否

否

否

:not(X) { sRules }

:not()

否

否

否

否

否

:enabled { sRules }

:enabled

否

否

否

否

否

:disabled { sRules }

:disabled

否

否

否

否

否

:checked { sRules }

:checked

否

否

否

否

否

:indeterminate { sRules }

:indeterminate

否

否

否

否

否

:default { sRules }

:default

否

否

否

否

否

:valid { sRules }

:valid

否

否

否

否

否

:invalid { sRules }

:invalid

否

否

否

否

否

:in-range { sRules }

:in-range

否

否

否

否

否

:out-of-range { sRules }

:out-of-range

否

否

否

否

否

:required { sRules }

:required

否

否

否

否

否

:optional { sRules }

:optional

否

否

否

否

否

:read-only { sRules }

:read-only

否

否

否

否

否

:read-write { sRules }

:read-write

否

否

否

否

否

伪元素

CSS 2.1:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

:after { sRules }

:after

否

否

否

否

是

:before { sRules }

:before

否

否

否

否

是

:first-letter { sRules }

:first-letter

否

是

是

是

是

:first-line { sRules }

:first-line

否

是

是

是

是

CSS 3:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

::before { sRules }

::before

否

否

否

否

否

::after { sRules }

::after

否

否

否

否

否

::first-letter { sRules }

::first-letter

否

否

否

否

否

::first-line { sRules }

::first-line

否

否

否

否

否

::selection { sRules }

::selection

否

否

否

否

否

::value { sRules }

::value

否

否

否

否

否

::choices { sRules }

::choices

否

否

否

否

否

::repeat-item { sRules }

::repeat-item

否

否

否

否

否

::repeat-index { sRules }

::repeat-index

否

否

否

否

否

属性

CSS 2.1:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ sRule!important  }

!important 声明

部分

部分

部分

是

是

列表

CSS 2.1:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ list-style : sStyle }

list-style

是

是

是

是

是

{ list-style-image : sStyle }

list-style-image

是

是

是

是

是

{ list-style-position : sStyle }

list-style-position

是

是

是

是

是

{ list-style-type : sStyle }

list-style-type

否

否

否

部分

是

颜色和背景

CSS 2.1:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ color : sColor }

color

是

是

是

是

是

{ background : sBackground }

background

是

是

是

是

是

{ background-attachment : sAttachment }

background-attachment

部分

部分

部分

是

是

{ background-color : sColor }

background-color

是

是

是

是

是

{ background-image : sLocation }

background-image

是

是

是

是

是

{ background-position : sPosition }

background-position

部分

部分

部分

部分

是

{ background-repeat : sRepeat }

background-repeat

是

是

是

是

是

CSS 3:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ color-profile : sProfile }

color-profile

否

否

否

否

否

{ rendering-intent : sIntent }

rendering-intent

否

否

否

否

否

{ background : sBackground1,
sBackground2, etc. }

background (multiple)

否

否

否

否

否

{ background-clip : sClip }

background-clip

否

否

否

否

否

{ background-origin : sOrigin }

background-origin

否

否

否

否

否

{ background-break : sBreak }

background-break

否

否

否

否

否

{ background-size : sSize }

background-size

否

否

否

否

否

字体和文本

CSS 2.1:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ direction : sDirection }

direction

是

是

是

是

是

{ font : sFont }

font

是

是

是

是

是

{ font-family : sFamily }

font-family

是

是

是

是

是

{ font-size : sSize }

font-size

是

是

是

是

是

{ font-style : sStyle }

font-style

是

是

是

是

是

{ font-variant : sVariant }

font-variant

是

是

是

是

是

{ font-weight : sWeight }

font-weight

部分

部分

部分

部分

是

 { letter-spacing : sSpacing }

letter-spacing

是

是

是

是

是

 { line-height : sHeight }

line-height

是

是

是

是

是

{ text-align : sAlign }

text-align

是

是

是

是

是

{ text-decoration : sDecoration }

text-decoration

是

是

是

是

是

{ text-indent : sIndent }

text-indent

是

是

是

是

是

{ text-transform : sTransform }

text-transform

是

是

是

是

是

{ unicode-bidi : sAlign }

unicode-bidi

是

是

是

是

是

{ vertical-align : sAlign }

vertical-align

是

是

是

是

是

{ white-space : sWrap }

white-space

部分

部分

部分

部分

是

{ word-spacing : sSpacing }

word-spacing

部分

部分

部分

部分

是

CSS 3:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ font-effect : sEffect }

font-effect

否

否

否

否

否

{ font-emphasize : sEmphasize }

font-emphasize

否

否

否

否

否

{ font-size-adjust : sSizeAdjust }

font-size-adjust

否

否

否

否

否

{ font-smooth : sSmooth }

font-smooth

否

否

否

否

否

{ font-stretch : sStretch }

font-stretch

否

否

否

否

否

{ hanging-punctuation : sHangingPunctuation }

hanging-punctuation

否

否

否

否

否

{ punctuation-trim : sTrim }

punctuation-trim

否

否

否

否

否

{ ruby-align : sRubyAlign }

ruby-align

是

是

是

是

是

{ ruby-overhang : sRubyOverhang }

ruby-overhang

是

是

是

是

是

{ ruby-position : sRubyPlacement }

ruby-position

是

是

是

是

是

{ ruby-span : sRubySpan }

ruby-span

否

否

否

否

否

{ text-align-last : sAlignLast }

text-align-last

部分

部分

部分

部分

部分

{ text-emphasis : sEmphasis }

text-emphasis

否

否

否

否

否

{ text-justify : sJustify }

text-justify

否

是

是

是

是

{ text-outline : sOutline }

text-outline

否

否

否

否

否

{ text-overflow : sOverflow}

text-overflow

否

部分

部分

部分

部分

{ text-shadow : sShadow }

text-shadow

否

否

否

否

否

{ text-wrap : sWrap }

text-wrap

否

否

否

否

否

{ word-break : sBreak }

word-break

部分

部分

部分

部分

部分

{ word-wrap : sWrap }

word-wrap

是

是

是

是

是

{ writing-mode : sFlow }

writing-mode

是

是

是

是

是

生成的内容

CSS 2.1:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ content : sContent }

content

否

否

否

否

是

{ counter-increment : sCounter }

counter-increment

否

否

否

否

是

{ counter-reset : sCounter }

counter-reset

否

否

否

否

是

{ quotes : sQuotes }

quotes

否

否

否

否

是

边框和布局

CSS 2.1:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ border : sBorder }

border

是

是

是

是

是

{ border-bottom : sBottom }

border-bottom

否

是

是

是

是

{ border-bottom-color : sColor }

border-bottom-color

是

是

是

是

是

{ border-bottom-style : sStyle }

border-bottom-style

否

是

是

是

是

{ border-bottom-width : sWidth }

border-bottom-width

否

是

是

是

是

{ border-collapse : sCollapse }

border-collapse

部分

部分

部分

部分

是

{ border-color : sColor }

border-color

是

是

是

是

是

{ border-left : sLeft }

border-left

否

是

是

是

是

{ border-left-color : sColor }

border-left-color

是

是

是

是

是

{ border-left-style : sStyle }

border-left-style

否

是

是

是

是

{ border-left-width : sWidth }

border-left-width

否

是

是

是

是

{ border-right : sRight}

border-right

否

是

是

是

是

{ border-right-color : sColor }

border-right-color

是

是

是

是

是

{ border-right-style : sStyle }

border-right-style

否

是

是

是

是

{ border-right-width : sWidth }

border-right-width

否

是

是

是

是

{ border-spacing : sSpacing }

border-spacing

否

否

否

否

是

{ border-style : sStyle }

border-style

否

部分

部分

部分

是

{ border-top : sTop }

border-top

否

是

是

是

是

{ border-top-color : sColor }

border-top-color

是

是

是

是

是

{ border-top-style : sStyle }

border-top-style

否

是

是

是

是

{ border-top-width : sWidth }

border-top-width

否

是

是

是

是

{ border-width : sWidth }

border-width

是

是

是

是

是

{ caption-side : sLocation }

caption-side

否

否

否

否

是

{ clear : sClear }

clear

是

是

是

是

是

{ empty-cells : sEmptyCells }

empty-cells

否

否

否

部分

是

{ float : sFloat }

float

是

是

是

是

是

{ margin : sMargin }

margin

是

是

是

是

是

{ margin-bottom : sHeight }

margin-bottom

是

是

是

是

是

{ margin-left : sWidth }

margin-left

是

是

是

是

是

{ margin-right : sWidth }

margin-right

是

是

是

是

是

{ margin-top : sHeight }

margin-top

是

是

是

是

是

{ padding : sPadding }

padding

是

是

是

是

是

{ padding-bottom : sPadding }

padding-bottom

是

是

是

是

是

{ padding-left : sPadding }

padding-left

是

是

是

是

是

{ padding-right : sPadding }

padding-right

是

是

是

是

是

{ padding-top : sPadding }

padding-top

是

是

是

是

是

{ table-layout : sLayout }

table-layout

是

是

是

是

是

CSS 3:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ border-break : sBreak }

border-break

否

否

否

否

否

{ border-image : sImage }

border-image

否

否

否

否

否

{ border-radius : sRadius }

border-radius

否

否

否

否

否

{ box-shadow : sShadow }

box-shadow

否

否

否

否

否

定位

CSS 2.1:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ bottom : sBottom }

bottom

否

部分

部分

部分

是

{ clip : sClip }

clip

否

是

是

是

是

{ display : sDisplay }

display

部分

部分

部分

部分

是

{ height : sHeight }

height

是

是

是

是

是

{ left : sPosition }

left

否

部分

部分

部分

是

{ max-height : sMaxHeight }

max-height

否

否

否

是

是

{ max-width : sWidth }

max-width

否

否

否

是

是

{ min-height : sMinHeight }

min-height

否

否

否

是

是

{ min-width : sMinWidth }

min-width

否

否

否

是

是

{ overflow : sOverflow }

overflow

部分

部分

部分

是

是

{ position : sPosition }

position

部分

部分

部分

是

是

{ right : sPosition }

right

否

部分

部分

部分

是

{ top : sTop }

top

否

部分

部分

部分

是

{ visibility : sVisibility }

visibility

是

是

是

是

是

{ width : sWidth }

width

是

是

是

是

是

{ z-index : vOrder }

z-index

部分

部分

部分

部分

是

CSS 3:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ overflow-x : sOverflow }

overflow-x

部分

部分

部分

是

是

{ overflow-y : sOverflow }

overflow-y

部分

部分

部分

是

是

打印

CSS 2.1:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ orphans : nLines }

orphans

否

否

否

否

是

{ page-break-after : sBreak }

page-break-after

是

是

是

是

是

{ page-break-before : sBreak }

page-break-before

是

是

是

是

是

{ page-break-inside : sBreak }

page-break-inside

否

否

否

否

是

{ widows : nLines }

widows

否

否

否

否

是

CSS 3:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ fit : sFit }

fit

否

否

否

否

否

{ fit-position : sPosition }

fit-position

否

否

否

否

否

{ image-orientation : sOrientation }

image-orientation

否

否

否

否

否

{ page : sPage }

page

否

否

否

否

否

{ size : sSize }

size

否

否

否

否

否

用户界面

CSS 2.1:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ cursor : sCursor }

cursor

否

是

是

是

是

{ outline : sOutline }

outline

否

否

否

否

是

{ outline-color : sColor }

outline-color

否

否

否

否

是

{ outline-style : sStyle }

outline-style

否

否

否

否

是

{ outline-width : sWidth }

outline-width

否

否

否

否

是

CSS 3:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ appearance : sAppearance }

appearance

否

否

否

否

否

{ box-sizing : sSizing }

box-sizing

否

否

否

否

是

{ icon : sIcon }

icon

否

否

否

否

否

{ nav-down : sNavDown }

nav-down

否

否

否

否

否

{ nav-index : sIndex }

nav-index

否

否

否

否

否

{ nav-left : sNavLeft }

nav-left

否

否

否

否

否

{ nav-right : sNavRight }

nav-right

否

否

否

否

否

{ nav-up : sNavUp }

nav-up

否

否

否

否

否

{ outline-offset : sOffset }

outline-offset

否

否

否

否

否

{ outline-radius : sRadius }

outline-radius

否

否

否

否

否

{ resize : sResize }

resize

否

否

否

否

否

多列布局

CSS 3:

 

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

{ column-break-after : sSize }

column-break-after

否

否

否

否

否

{ column-break-before : sSize }

column-break-before

否

否

否

否

否

{ column-break-inside : sSize }

column-break-inside

否

否

否

否

否

{ column-count : sCount }

column-count

否

否

否

否

否

{ column-gap : sSize }

column-gap

否

否

否

否

否

{ column-rule : sRule }

column-rule

否

否

否

否

否

{ columns : sColumns }

columns

否

否

否

否

否

语音

Internet Explorer 中不支持以下 CSS 3 语音属性:

  • voice-volume
  • voice-balance
  • speak
  • pause
  • pause-after
  • pause-before
  • rest
  • rest-before
  • rest-after
  • cue
  • cue-after
  • cue-before
  • mark
  • mark-before
  • mark-after
  • voice-family
  • voice-rate
  • voice-pitch
  • voice-pitch-range
  • voice-stress
  • voice-duration
  • phonemes

媒体查询

Internet Explorer 中不支持以下 CSS 3 媒体查询属性:

  • width
  • height
  • device-width
  • device-height
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

值

数字

CSS 2.1:

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

<number>

是

是

是

是

是

<length>

是

是

是

是

是

<percentage>

是

是

是

是

是

<integer>

是

是

是

是

是

CSS 3:

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

<angle>

否

否

否

否

否

<time>

否

否

否

否

否

<frequency>

否

否

否

否

否

字符串

CSS 2.1:

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

<string>

是

是

是

是

是

\code

否

否

是

是

是

形状

CSS 2.1:

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

rect()

否

是

是

是

是

函数

CSS 2.1:

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

url()

是

是

是

是

是

counter()

否

否

否

否

是

attr()

否

否

否

否

是

CSS 3:

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

calc()

否

否

否

否

否

颜色

CSS 2.1:

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

<color>(名称)

是

是

是

是

是

<color>(#rrggbbor#rgb 表示法)

是

是

是

是

是

<color>(rgb(r,g,b) 表示法)

是

是

是

是

是

<color>(系统颜色)

是

是

是

是

是

透明

否

否

部分

是

是

CSS 3:

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

<color>(rgba(r,g,b,a) 表示法)

否

否

否

否

否

<color>(hsl(h,s,l) 表示法)

否

否

否

否

否

<color>(hsla(h,s,l,a) 表示法)

否

否

否

否

否

关键字

CSS 2.1:

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

auto

否

否

部分

是

是

inherit

否

否

否

否

是

CSS 3:

 

Internet Explorer 5

Internet Explorer 5.5

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

initial

否

否

否

否

否

单位

Internet Explorer 3.0 和更高版本中支持以下所有单位:

  • px
  • pt
  • pc
  • cm
  • mm
  • in
  • em
  • ex
  • %

Internet Explorer 中不支持以下任何 CSS 3 单位:

  • deg
  • grad
  • rad
  • ms
  • s
  • Hz
  • kHz
  • turn
  • gd
  • rem
  • vw
  • vh
  • vm
  • ch

 

CSS 兼容性和 Internet Explorer

随着每个新版本的 Windows Internet Explorer 的发布,对级联样式表 (CSS) 标准的支持也在稳步提高。 Internet Explorer 6 是第一个完全符合 CSS 级别 1 规范的 Internet Explorer 版本。 Windows Internet Explorer 8 完全符合 CSS 级别 2 修订 1 (CSS 2.1) 规范,并支持某些 CSS 级别 3 (CSS 3) 的功能。

如果您的网站面向的浏览器包括早期版本的 Internet Explorer,则您需要知道这些版本符合的 CSS 级别规范。 本文简述了各个最近的 Internet Explorer 版本的 CSS 合规性(包括 Internet Explorer 8 中提供的支持)。

注意 Internet Explorer 8 中新增的 CSS 功能仅当您的页面在 IE8 模式(或更高版本)中呈现时可用。 通过在您页面的标题部分中包含以下 meta 标记,可以确保您的页面以 IE8 模式显示:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

有关文档兼容性模式的更多信息,请参见“定义文档兼容性”。

本文以 MSDN 上的 CSS 参考文档(可能为英文网页)为基础且结构较为松散。 本文包含以下各节:

简介

每个表均列出了最近的 Internet Explorer 版本中分组 CSS 功能的支持状态信息。 在每一节中,第一个表表示 CSS 2.1 或早期版本中引入的功能,第二个表表示万维网联合会 (W3C) 为 CSS 3 规划的功能。

单元格中的值“是”表示在相应版本的 Internet Explorer 中实现了该功能。

单元格中的值“部分”表示只在相应版本的 Internet Explorer 中部分实现了该功能。 有关更多信息,请单击链接查看 MSDN 上该功能的参考页。

单元格中的值“否”表示未在相应版本的 Internet Explorer 中实现该功能。

At 规则

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
@charset 否 是 是 是 是
@import 是 是 是 是 是
@media 否 是 是 是 是
@page 部分 部分 部分 部分 是

CSS 3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
@font-face 否 是 是 是 是
@namespace 否 否 否 否 否

选择器

元素选择器

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
.value { sRules } 类(请参见注释) 部分 部分 部分 是 是
#value { sRules } ID 是 是 是 是 是
E { sRules } 类型 是 是 是 是 是
* { sRules } 通用 否 否 否 是 是

注释 在 Internet Explorer 7 之前的版本中,每个元素只能有两个类选择器。

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
ns|E { sRules } 已指定命名空间 否 否 否 否 否

属性选择器

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
[att=val] { sRules } 相等 [=] 否 否 否 是 是
[att] { sRules } 存在 [] 否 否 否 是 是
[att|=val] { sRules } 连字符 [|=] 否 否 否 是 是
[att~=val] { sRules } 空白 [~=] 否 否 否 是 是

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
[ns|attr] { sRules } 已指定命名空间 否 否 否 是 是
[att^=val] { sRules } 前缀 [^=] 否 否 否 是 是
[att*=val] { sRules } 子字符串 [*=] 否 否 否 是 是
[att$=val] { sRules } 后缀 [$=] 否 否 否 是 是

连结符

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
E+F { sRules } 相邻同级 (+) 否 否 否 是 是
E>F { sRules } 子级 (>) 否 否 否 是 是
EF { sRules } 后代 是 是 是 是 是

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
E~F { sRules } 常规同级 (~) 否 否 否 是 是

伪类

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
:active { sRules } :active 否 否 否 部分 是
:first-child { sRules } :first-child 否 否 否 是 是
:focus { sRules } :focus 否 否 否 否 是
:hover { sRules } :hover 部分 部分 部分 是 是
:lang(C) { sRules } :lang() 否 否 否 否 是
:link { sRules } :link 是 是 是 是 是
:visited { sRules } :visited 是 是 是 是 是
@page :first { sRules } @page :first 否 否 否 否 是
@page :left { sRules } @page :left 否 否 否 否 是
@page :right { sRules } @page :right 否 否 否 否 是

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
:root { sRules } :root 否 否 否 否 否
:nth-child() { sRules } :nth-child() 否 否 否 否 否
:nth-last-child() { sRules } :nth-last-child() 否 否 否 否 否
:nth-of-type() { sRules } :nth-of-type() 否 否 否 否 否
:nth-last-of-type() { sRules } :nth-last-of-type() 否 否 否 否 否
:last-child { sRules } :last-child 否 否 否 否 否
:first-of-type { sRules } :first-of-type 否 否 否 否 否
:last-of-type { sRules } :last-of-type 否 否 否 否 否
:only-child { sRules } :only-child 否 否 否 否 否
:only-of-type { sRules } :only-of-type 否 否 否 否 否
:empty { sRules } :empty 否 否 否 否 否
:target { sRules } :target 否 否 否 否 否
:not(X) { sRules } :not() 否 否 否 否 否
:enabled { sRules } :enabled 否 否 否 否 否
:disabled { sRules } :disabled 否 否 否 否 否
:checked { sRules } :checked 否 否 否 否 否
:indeterminate { sRules } :indeterminate 否 否 否 否 否
:default { sRules } :default 否 否 否 否 否
:valid { sRules } :valid 否 否 否 否 否
:invalid { sRules } :invalid 否 否 否 否 否
:in-range { sRules } :in-range 否 否 否 否 否
:out-of-range { sRules } :out-of-range 否 否 否 否 否
:required { sRules } :required 否 否 否 否 否
:optional { sRules } :optional 否 否 否 否 否
:read-only { sRules } :read-only 否 否 否 否 否
:read-write { sRules } :read-write 否 否 否 否 否

伪元素

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
:after { sRules } :after 否 否 否 否 是
:before { sRules } :before 否 否 否 否 是
:first-letter { sRules } :first-letter 否 是 是 是 是
:first-line { sRules } :first-line 否 是 是 是 是

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
::before { sRules } ::before 否 否 否 否 否
::after { sRules } ::after 否 否 否 否 否
::first-letter { sRules } ::first-letter 否 否 否 否 否
::first-line { sRules } ::first-line 否 否 否 否 否
::selection { sRules } ::selection 否 否 否 否 否
::value { sRules } ::value 否 否 否 否 否
::choices { sRules } ::choices 否 否 否 否 否
::repeat-item { sRules } ::repeat-item 否 否 否 否 否
::repeat-index { sRules } ::repeat-index 否 否 否 否 否

属性

CSS 2.1:
  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ sRule!important  } !important 声明 部分 部分 部分 是 是

列表

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ list-style : sStyle } list-style 是 是 是 是 是
{ list-style-image : sStyle } list-style-image 是 是 是 是 是
{ list-style-position : sStyle } list-style-position 是 是 是 是 是
{ list-style-type : sStyle } list-style-type 否 否 否 部分 是

颜色和背景

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ color : sColor } color 是 是 是 是 是
{ background : sBackground } background 是 是 是 是 是
{ background-attachment : sAttachment } background-attachment 部分 部分 部分 是 是
{ background-color : sColor } background-color 是 是 是 是 是
{ background-image : sLocation } background-image 是 是 是 是 是
{ background-position : sPosition } background-position 部分 部分 部分 部分 是
{ background-repeat : sRepeat } background-repeat 是 是 是 是 是

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ color-profile : sProfile } color-profile 否 否 否 否 否
{ rendering-intent : sIntent } rendering-intent 否 否 否 否 否
{ background : sBackground1,
sBackground2, etc. }
background (multiple) 否 否 否 否 否
{ background-clip : sClip } background-clip 否 否 否 否 否
{ background-origin : sOrigin } background-origin 否 否 否 否 否
{ background-break : sBreak } background-break 否 否 否 否 否
{ background-size : sSize } background-size 否 否 否 否 否

字体和文本

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ direction : sDirection } direction 是 是 是 是 是
{ font : sFont } font 是 是 是 是 是
{ font-family : sFamily } font-family 是 是 是 是 是
{ font-size : sSize } font-size 是 是 是 是 是
{ font-style : sStyle } font-style 是 是 是 是 是
{ font-variant : sVariant } font-variant 是 是 是 是 是
{ font-weight : sWeight } font-weight 部分 部分 部分 部分 是
 { letter-spacing : sSpacing } letter-spacing 是 是 是 是 是
 { line-height : sHeight } line-height 是 是 是 是 是
{ text-align : sAlign } text-align 是 是 是 是 是
{ text-decoration : sDecoration } text-decoration 是 是 是 是 是
{ text-indent : sIndent } text-indent 是 是 是 是 是
{ text-transform : sTransform } text-transform 是 是 是 是 是
{ unicode-bidi : sAlign } unicode-bidi 是 是 是 是 是
{ vertical-align : sAlign } vertical-align 是 是 是 是 是
{ white-space : sWrap } white-space 部分 部分 部分 部分 是
{ word-spacing : sSpacing } word-spacing 部分 部分 部分 部分 是

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ font-effect : sEffect } font-effect 否 否 否 否 否
{ font-emphasize : sEmphasize } font-emphasize 否 否 否 否 否
{ font-size-adjust : sSizeAdjust } font-size-adjust 否 否 否 否 否
{ font-smooth : sSmooth } font-smooth 否 否 否 否 否
{ font-stretch : sStretch } font-stretch 否 否 否 否 否
{ hanging-punctuation : sHangingPunctuation } hanging-punctuation 否 否 否 否 否
{ punctuation-trim : sTrim } punctuation-trim 否 否 否 否 否
{ ruby-align : sRubyAlign } ruby-align 是 是 是 是 是
{ ruby-overhang : sRubyOverhang } ruby-overhang 是 是 是 是 是
{ ruby-position : sRubyPlacement } ruby-position 是 是 是 是 是
{ ruby-span : sRubySpan } ruby-span 否 否 否 否 否
{ text-align-last : sAlignLast } text-align-last 部分 部分 部分 部分 部分
{ text-emphasis : sEmphasis } text-emphasis 否 否 否 否 否
{ text-justify : sJustify } text-justify 否 是 是 是 是
{ text-outline : sOutline } text-outline 否 否 否 否 否
{ text-overflow : sOverflow} text-overflow 否 部分 部分 部分 部分
{ text-shadow : sShadow } text-shadow 否 否 否 否 否
{ text-wrap : sWrap } text-wrap 否 否 否 否 否
{ word-break : sBreak } word-break 部分 部分 部分 部分 部分
{ word-wrap : sWrap } word-wrap 是 是 是 是 是
{ writing-mode : sFlow } writing-mode 是 是 是 是 是

生成的内容

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ content : sContent } content 否 否 否 否 是
{ counter-increment : sCounter } counter-increment 否 否 否 否 是
{ counter-reset : sCounter } counter-reset 否 否 否 否 是
{ quotes : sQuotes } quotes 否 否 否 否 是

边框和布局

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ border : sBorder } border 是 是 是 是 是
{ border-bottom : sBottom } border-bottom 否 是 是 是 是
{ border-bottom-color : sColor } border-bottom-color 是 是 是 是 是
{ border-bottom-style : sStyle } border-bottom-style 否 是 是 是 是
{ border-bottom-width : sWidth } border-bottom-width 否 是 是 是 是
{ border-collapse : sCollapse } border-collapse 部分 部分 部分 部分 是
{ border-color : sColor } border-color 是 是 是 是 是
{ border-left : sLeft } border-left 否 是 是 是 是
{ border-left-color : sColor } border-left-color 是 是 是 是 是
{ border-left-style : sStyle } border-left-style 否 是 是 是 是
{ border-left-width : sWidth } border-left-width 否 是 是 是 是
{ border-right : sRight} border-right 否 是 是 是 是
{ border-right-color : sColor } border-right-color 是 是 是 是 是
{ border-right-style : sStyle } border-right-style 否 是 是 是 是
{ border-right-width : sWidth } border-right-width 否 是 是 是 是
{ border-spacing : sSpacing } border-spacing 否 否 否 否 是
{ border-style : sStyle } border-style 否 部分 部分 部分 是
{ border-top : sTop } border-top 否 是 是 是 是
{ border-top-color : sColor } border-top-color 是 是 是 是 是
{ border-top-style : sStyle } border-top-style 否 是 是 是 是
{ border-top-width : sWidth } border-top-width 否 是 是 是 是
{ border-width : sWidth } border-width 是 是 是 是 是
{ caption-side : sLocation } caption-side 否 否 否 否 是
{ clear : sClear } clear 是 是 是 是 是
{ empty-cells : sEmptyCells } empty-cells 否 否 否 部分 是
{ float : sFloat } float 是 是 是 是 是
{ margin : sMargin } margin 是 是 是 是 是
{ margin-bottom : sHeight } margin-bottom 是 是 是 是 是
{ margin-left : sWidth } margin-left 是 是 是 是 是
{ margin-right : sWidth } margin-right 是 是 是 是 是
{ margin-top : sHeight } margin-top 是 是 是 是 是
{ padding : sPadding } padding 是 是 是 是 是
{ padding-bottom : sPadding } padding-bottom 是 是 是 是 是
{ padding-left : sPadding } padding-left 是 是 是 是 是
{ padding-right : sPadding } padding-right 是 是 是 是 是
{ padding-top : sPadding } padding-top 是 是 是 是 是
{ table-layout : sLayout } table-layout 是 是 是 是 是

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ border-break : sBreak } border-break 否 否 否 否 否
{ border-image : sImage } border-image 否 否 否 否 否
{ border-radius : sRadius } border-radius 否 否 否 否 否
{ box-shadow : sShadow } box-shadow 否 否 否 否 否

定位

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ bottom : sBottom } bottom 否 部分 部分 部分 是
{ clip : sClip } clip 否 是 是 是 是
{ display : sDisplay } display 部分 部分 部分 部分 是
{ height : sHeight } height 是 是 是 是 是
{ left : sPosition } left 否 部分 部分 部分 是
{ max-height : sMaxHeight } max-height 否 否 否 是 是
{ max-width : sWidth } max-width 否 否 否 是 是
{ min-height : sMinHeight } min-height 否 否 否 是 是
{ min-width : sMinWidth } min-width 否 否 否 是 是
{ overflow : sOverflow } overflow 部分 部分 部分 是 是
{ position : sPosition } position 部分 部分 部分 是 是
{ right : sPosition } right 否 部分 部分 部分 是
{ top : sTop } top 否 部分 部分 部分 是
{ visibility : sVisibility } visibility 是 是 是 是 是
{ width : sWidth } width 是 是 是 是 是
{ z-index : vOrder } z-index 部分 部分 部分 部分 是

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ overflow-x : sOverflow } overflow-x 部分 部分 部分 是 是
{ overflow-y : sOverflow } overflow-y 部分 部分 部分 是 是

打印

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ orphans : nLines } orphans 否 否 否 否 是
{ page-break-after : sBreak } page-break-after 是 是 是 是 是
{ page-break-before : sBreak } page-break-before 是 是 是 是 是
{ page-break-inside : sBreak } page-break-inside 否 否 否 否 是
{ widows : nLines } widows 否 否 否 否 是

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ fit : sFit } fit 否 否 否 否 否
{ fit-position : sPosition } fit-position 否 否 否 否 否
{ image-orientation : sOrientation } image-orientation 否 否 否 否 否
{ page : sPage } page 否 否 否 否 否
{ size : sSize } size 否 否 否 否 否

用户界面

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ cursor : sCursor } cursor 否 是 是 是 是
{ outline : sOutline } outline 否 否 否 否 是
{ outline-color : sColor } outline-color 否 否 否 否 是
{ outline-style : sStyle } outline-style 否 否 否 否 是
{ outline-width : sWidth } outline-width 否 否 否 否 是

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ appearance : sAppearance } appearance 否 否 否 否 否
{ box-sizing : sSizing } box-sizing 否 否 否 否 是
{ icon : sIcon } icon 否 否 否 否 否
{ nav-down : sNavDown } nav-down 否 否 否 否 否
{ nav-index : sIndex } nav-index 否 否 否 否 否
{ nav-left : sNavLeft } nav-left 否 否 否 否 否
{ nav-right : sNavRight } nav-right 否 否 否 否 否
{ nav-up : sNavUp } nav-up 否 否 否 否 否
{ outline-offset : sOffset } outline-offset 否 否 否 否 否
{ outline-radius : sRadius } outline-radius 否 否 否 否 否
{ resize : sResize } resize 否 否 否 否 否

多列布局

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ column-break-after : sSize } column-break-after 否 否 否 否 否
{ column-break-before : sSize } column-break-before 否 否 否 否 否
{ column-break-inside : sSize } column-break-inside 否 否 否 否 否
{ column-count : sCount } column-count 否 否 否 否 否
{ column-gap : sSize } column-gap 否 否 否 否 否
{ column-rule : sRule } column-rule 否 否 否 否 否
{ columns : sColumns } columns 否 否 否 否 否

语音

Internet Explorer 中不支持以下 CSS 3 语音属性:

  • voice-volume
  • voice-balance
  • speak
  • pause
  • pause-after
  • pause-before
  • rest
  • rest-before
  • rest-after
  • cue
  • cue-after
  • cue-before
  • mark
  • mark-before
  • mark-after
  • voice-family
  • voice-rate
  • voice-pitch
  • voice-pitch-range
  • voice-stress
  • voice-duration
  • phonemes

媒体查询

Internet Explorer 中不支持以下 CSS 3 媒体查询属性:

  • width
  • height
  • device-width
  • device-height
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

值

数字

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
<number> 是 是 是 是 是
<length> 是 是 是 是 是
<percentage> 是 是 是 是 是
<integer> 是 是 是 是 是

CSS 3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
<angle> 否 否 否 否 否
<time> 否 否 否 否 否
<frequency> 否 否 否 否 否

字符串

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
<string> 是 是 是 是 是
\code 否 否 是 是 是

形状

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
rect() 否 是 是 是 是

函数

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
url() 是 是 是 是 是
counter() 否 否 否 否 是
attr() 否 否 否 否 是

CSS 3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
calc() 否 否 否 否 否

颜色

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
<color>(名称) 是 是 是 是 是
<color>(#rrggbbor#rgb 表示法) 是 是 是 是 是
<color>(rgb(r,g,b) 表示法) 是 是 是 是 是
<color>(系统颜色) 是 是 是 是 是
透明 否 否 部分 是 是

CSS 3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
<color>(rgba(r,g,b,a) 表示法) 否 否 否 否 否
<color>(hsl(h,s,l) 表示法) 否 否 否 否 否
<color>(hsla(h,s,l,a) 表示法) 否 否 否 否 否

关键字

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
auto 否 否 部分 是 是
inherit 否 否 否 否 是

CSS 3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
initial 否 否 否 否 否

单位

Internet Explorer 3.0 和更高版本中支持以下所有单位:

  • px
  • pt
  • pc
  • cm
  • mm
  • in
  • em
  • ex
  • %

Internet Explorer 中不支持以下任何 CSS 3 单位:

  • deg
  • grad
  • rad
  • ms
  • s
  • Hz
  • kHz
  • turn
  • gd
  • rem
  • vw
  • vh
  • vm
  • ch
posted @ 2011-06-15 10:21  天之子  阅读(322)  评论(0)    收藏  举报