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

另请参阅

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值