`
justcss
  • 浏览: 122026 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

【转】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 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 : s Emphasize } font-emphasize
{ font-size-adjust : sSizeAdjust } font-size-adjust
{ font-smooth : s Smooth } font-smooth
{ font-stretch : s Stretch } font-stretch
{ hanging-punctuation : sH angingPunctuation } 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 : s Emphasis } text-emphasis
{ text-justify : s Justify } 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 : s Style } border-bottom-style
{ border-bottom-width : sWidth } border-bottom-width
{ border-collapse : sCollapse } border-collapse 部分 部分 部分 部分
{ border-color : sColor } border-color
{ border-left : s Left } 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 : s Right} 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 : s Top } border-top
{ border-top-color : sColor } border-top-color
{ border-top-style : s Style } 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 : s Width } 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 : s Clip } clip
{ display : sDisplay } display 部分 部分 部分 部分
{ height : s Height } height
{ left : sPosition } left 部分 部分 部分
{ max-height : s MaxHeight } max-height
{ max-width : s Width } max-width
{ min-height : s MinHeight } 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

另请参阅

原文来自:MSDN

 

分享到:
评论

相关推荐

    div+css常见兼容性问题

    解决CSS兼容性问题的两种常见方法是: 1. 使用`!important`标记:在CSS中,`!important`可以强制应用某个样式,但这可能导致优先级混乱。例如: ```css #wrapper { width: 100px !important; /* IE7+FF */ ...

    css 浏览器兼容性速查

    然而,不同的浏览器对于CSS的支持程度和实现方式可能存在差异,这就涉及到了“浏览器兼容性”问题。"CSS浏览器兼容性速查"是开发者在工作中不可或缺的一个参考资料,它帮助我们了解各种CSS属性在不同浏览器上的表现...

    Css与各浏览器兼容性

    以下是一些关键的CSS兼容性问题及其解决方案: 1. **列表元素的默认样式**:Firefox和IE对`ul`和`ol`的`padding-left`处理不同。Firefox默认值约为40px,而IE默认为0。通常,通过设置`ul{margin:0;padding:0;}`可以...

    css兼容性(IE 和 firefox)技巧大全.doc

    以上技巧是针对IE和Firefox之间CSS兼容性问题的一些常见解决策略。在实际开发中,还需要注意DOCTYPE声明的使用,以确保W3C标准的遵循。同时,随着浏览器的更新,一些旧的兼容性问题可能已经得到解决,但仍需要关注新...

    CSS3 support for Internet Explorer 6, 7, and 8

    标题 "CSS3 support for Internet Explorer 6, 7, and 8" 提及的是关于如何在旧版本的Internet Explorer浏览器(IE6、IE7和IE8)中实现对CSS3特性的支持。这些浏览器并不原生支持许多CSS3的新功能,如圆角、阴影、...

    css兼容性的解决办法

    通过上述策略,开发者可以有效地处理CSS兼容性问题,确保网站在不同浏览器和设备上具有良好的用户体验。不过,值得注意的是,解决兼容性问题的同时,也要注重性能优化,避免引入不必要的代码和负担。

    CSS兼容规则 CSS兼容

    根据题目中给出的信息,我们可以总结出以下几点关于CSS兼容性的规则和技巧: 1. **CSS Hack技术**:这是解决浏览器兼容性问题的一种常见手段。通过特定的语法来针对不同版本的浏览器应用不同的样式,从而达到兼容的...

    让CSS兼容IE和Firefox的技巧集合

    以下是一些针对IE和Firefox的CSS兼容性技巧: 1. **div的垂直居中问题**:在IE和Firefox中,可以通过设置`line-height`与div的高度相同,并结合`vertical-align: middle;`实现垂直居中。但这种方法不适用于多行文本...

    CSS兼容性技巧整理

    以上总结的CSS兼容性技巧有助于开发者解决跨浏览器兼容性问题,特别是针对IE6和IE7等老旧浏览器。虽然现代浏览器已经解决了大部分兼容性问题,但在维护旧项目或确保广泛兼容性时,了解这些技巧仍然非常重要。

    HTML标签和CSS兼容举例

    在这篇文章中,我们将深入探讨HTML标签和CSS在不同浏览器环境下的兼容性问题,并通过具体的例子来展示如何处理这些兼容性挑战。 首先,我们来看HTML标签。HTML5引入了许多新的标签,如、、、等,这些标签旨在使网页...

    IE5,IE6,IE7,IE8的css兼容性列表

    在互联网发展的早期,微软的Internet Explorer(IE)浏览器曾经占据主导地位,尤其是IE5、IE6、IE7和IE8这几个版本。每个版本都有其独特的特性和对CSS(层叠样式表)的支持程度,这对于前端开发者来说是必须要了解的...

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

    在CSS世界中,Internet Explorer(IE)6, 7, 和 8的浏览器对CSS标准的支持情况各有差异,这给开发者带来了许多挑战。本文详细分析了这三个版本的IE浏览器在CSS选择器与继承、伪类与伪元素、属性支持、其他技术以及...

    IE与Firefox的CSS兼容大全

    以下是一些针对IE与Firefox的CSS兼容性的要点: 1. **DOCTYPE的影响**:DOCTYPE声明会影响浏览器进入不同的渲染模式。在IE中,没有正确的DOCTYPE会导致浏览器进入“quirks模式”,而Firefox则会遵循更接近标准的...

    css入门教程IE和Firefox浏览器CSS兼容性技巧整理.docx

    【CSS入门教程:IE和Firefox浏览器CSS兼容性技巧】 在网页设计中,CSS(层叠样式表)扮演着至关重要的角色,它使得我们能够控制页面的布局和样式。然而,不同浏览器之间对于CSS的支持程度和解析方式存在差异,尤其...

    css兼容包-CSS圆角、阴影

    随着技术的发展,CSS引入了许多高级特性,如圆角和阴影,但这些特性在早期的浏览器中可能不被支持,这就需要特殊的解决方案来实现跨浏览器兼容性。"css兼容包-CSS圆角、阴影"正是为了解决这个问题而存在的。 标题中...

    css兼容性详解

    ### CSS兼容性详解 #### 一、CSS Hack技术 **CSS Hack**是一种针对不同浏览器或浏览器版本编写特定样式的技巧,以确保网页在各种浏览器下的表现一致。随着浏览器技术的发展,许多Hack方法已经逐渐不再适用。 ####...

    css兼容.txt

    ### CSS兼容性问题详解 #### 一、引言 随着Web技术的发展,浏览器种类日益繁多,不同浏览器对CSS的支持程度也不尽相同。这给前端开发者带来了不小的挑战,尤其是在面对老旧浏览器如IE6、IE7、IE8以及较新的火狐...

Global site tag (gtag.js) - Google Analytics