본문 바로가기
www/CSS_tip

CSS Internet Explorer 호환성

by 랭님 2012. 4. 26.

At-rules

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
@charsetNoYesYesYesYesYes
@importYesYesYesYesYesYes
@mediaNoYesYesYesYesUpdated
@pagePartialPartialPartialPartialYesYes

CSS3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
@font-faceNoYesYesYesYesUpdated
@namespaceNoNoNoNoNoYes

Selectors

Element Selectors

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
.value {sRules }Class (see Note)PartialPartialPartialYesYesYes
#value {sRules }IDYesYesYesYesYesYes
E { sRules }TypeYesYesYesYesYesYes
* { sRules }UniversalNoNoNoYesYesYes

Note   Prior to Internet Explorer 7, there was a two-class selector limit per element.


CSS3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
ns|E { sRules }NamespacedNoNoNoNoNoYes

Attribute Selectors

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
[att=val] { sRules }Equality [=]NoNoNoYesYesYes
[att] { sRules }Existence []NoNoNoYesYesYes
[att|=val] { sRules }Hyphen [|=]NoNoNoYesYesYes
[att~=val] { sRules }Whitespace [~=]NoNoNoYesYesYes

CSS3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
[ns|attr] { sRules }NamespacedNoNoNoYesYesYes
[att^=val] { sRules }Prefix [^=]NoNoNoYesYesYes
[att*=val] { sRules }Substring [*=]NoNoNoYesYesYes
[att$=val] { sRules }Suffix [$=]NoNoNoYesYesYes

Combinators

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
E + F { sRules }Adjacent Sibling (+)NoNoNoYesYesYes
E > F { sRules }Child (>)NoNoNoYesYesYes
E F { sRules }DescendantYesYesYesYesYesYes

CSS3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
E ~ F { sRules }General Sibling (~)NoNoNoYesYesYes

Pseudo-classes

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
:active { sRules }:activeNoNoNoPartialYesYes
:first-child { sRules }:first-childNoNoNoYesYesYes
:focus { sRules }:focusNoNoNoNoYesYes
:hover { sRules }:hoverPartialPartialPartialYesYesYes
:lang(C) { sRules }:lang()NoNoNoNoYesYes
:link { sRules }:linkYesYesYesYesYesYes
:visited { sRules }:visitedYesYesYesYesYesYes
@page :first { sRules }@page :firstNoNoNoNoYesYes
@page :left { sRules }@page :leftNoNoNoNoYesYes
@page :right { sRules }@page :rightNoNoNoNoYesYes

CSS3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
:root { sRules }:rootNoNoNoNoNoYes
:nth-child(n) { sRules }:nth-child(n)NoNoNoNoNoYes
:nth-last-child(n) { sRules }:nth-last-child(n)NoNoNoNoNoYes
:nth-of-type(n) { sRules }:nth-of-type(n)NoNoNoNoNoYes
:nth-last-of-type(n) { sRules }:nth-last-of-type(n)NoNoNoNoNoYes
:last-child { sRules }:last-childNoNoNoNoNoYes
:first-of-type { sRules }:first-of-typeNoNoNoNoNoYes
:last-of-type { sRules }:last-of-typeNoNoNoNoNoYes
:only-child { sRules }:only-childNoNoNoNoNoYes
:only-of-type { sRules }:only-of-typeNoNoNoNoNoYes
:empty { sRules }:emptyNoNoNoNoNoYes
:target { sRules }:targetNoNoNoNoNoYes
:not(s) { sRules }:not(s)NoNoNoNoNoYes
:enabled { sRules }:enabledNoNoNoNoNoYes
:disabled { sRules }:disabledNoNoNoNoNoYes
:checked { sRules }:checkedNoNoNoNoNoYes
:indeterminate { sRules }:indeterminateNoNoNoNoNoYes
:default { sRules }:defaultNoNoNoNoNoNo
:valid { sRules }:validNoNoNoNoNoNo
:invalid { sRules }:invalidNoNoNoNoNoNo
:in-range { sRules }:in-rangeNoNoNoNoNoNo
:out-of-range { sRules }:out-of-rangeNoNoNoNoNoNo
:required { sRules }:requiredNoNoNoNoNoNo
:optional { sRules }:optionalNoNoNoNoNoNo
:read-only { sRules }:read-onlyNoNoNoNoNoNo
:read-write { sRules }:read-writeNoNoNoNoNoNo

Pseudo-elements

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
:after { sRules }:afterNoNoNoNoYesYes
:before { sRules }:beforeNoNoNoNoYesYes
:first-letter { sRules }:first-letterNoYesYesYesYesYes
:first-line { sRules }:first-lineNoYesYesYesYesYes

CSS3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
::before { sRules }::beforeNoNoNoNoNoNo
::after { sRules }::afterNoNoNoNoNoNo
::first-letter { sRules }::first-letterNoNoNoNoNoNo
::first-line { sRules }::first-lineNoNoNoNoNoNo
::selection { sRules }::selectionNoNoNoNoNoYes
::value { sRules }::valueNoNoNoNoNoNo
::choices { sRules }::choicesNoNoNoNoNoNo
::repeat-item { sRules }::repeat-itemNoNoNoNoNoNo
::repeat-index { sRules }::repeat-indexNoNoNoNoNoNo

Properties

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
{ sRule!important  }!important DeclarationPartialPartialPartialYesYesYes

2D Transforms

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
transform : sFunction }-ms-transformNoNoNoNoNoYes
transform-origin : sOrigin }-ms-transform-originNoNoNoNoNoYes

Lists

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
list-style : sStyle }list-styleYesYesYesYesYesYes
list-style-image : sStyle }list-style-imageYesYesYesYesYesYes
list-style-position : sStyle }list-style-positionYesYesYesYesYesYes
list-style-type : sStyle }list-style-typeNoNoNoPartialYesYes

Color and Background

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
color : sColor }colorYesYesYesYesYesYes
background : sBackground }backgroundYesYesYesYesYesUpdated
background-attachment : sAttachment }background-attachmentPartialPartialPartialYesYesUpdated
background-color : sColor }background-colorYesYesYesYesYesUpdated
background-image : sLocation }background-imageYesYesYesYesYesUpdated
background-position : sPosition }background-positionPartialPartialPartialPartialYesUpdated
background-repeat : sRepeat }background-repeatYesYesYesYesYesUpdated

CSS3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
color-profile : sProfile }color-profileNoNoNoNoNoNo
rendering-intent : sIntent }rendering-intentNoNoNoNoNoNo
background : sBackground1,
sBackground2, etc. }
background (multiple)NoNoNoNoNoYes
background-clip : sClip }background-clipNoNoNoNoNoYes
background-origin : sOrigin }background-originNoNoNoNoNoYes
background-break : sBreak }background-breakNoNoNoNoNoNo
background-size : sSize }background-sizeNoNoNoNoNoYes

Font and Text

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
direction : sDirection }directionYesYesYesYesYesYes
font : sFont }fontYesYesYesYesYesYes
font-family : sFamily }font-familyYesYesYesYesYesYes
font-size : sSize }font-sizeYesYesYesYesYesYes
font-style : sStyle }font-styleYesYesYesYesYesYes
font-variant : sVariant }font-variantYesYesYesYesYesYes
font-weight : sWeight }font-weightPartialPartialPartialPartialYesYes
 { letter-spacing :sSpacing }letter-spacingYesYesYesYesYesYes
 { line-height : sHeight}line-heightYesYesYesYesYesYes
text-align : sAlign }text-alignYesYesYesYesYesYes
text-decoration :sDecoration }text-decorationYesYesYesYesYesYes
text-indent : sIndent }text-indentYesYesYesYesYesYes
text-transform :sTransform }text-transformYesYesYesYesYesYes
unicode-bidi : sAlign }unicode-bidiYesYesYesYesYesYes
vertical-align : sAlign }vertical-alignYesYesYesYesYesYes
white-space : sWrap }white-spacePartialPartialPartialPartialYesYes
word-spacing : sSpacing }word-spacingPartialPartialPartialPartialYesYes

CSS3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
font-effect : sEffect }font-effectNoNoNoNoNoNo
font-emphasize : sEmphasize }font-emphasizeNoNoNoNoNoNo
font-size-adjust : sSizeAdjust}font-size-adjustNoNoNoNoNoNo
font-smooth : sSmooth }font-smoothNoNoNoNoNoNo
font-stretch : sStretch }font-stretchNoNoNoNoNoYes
hanging-punctuation : sHangingPunctuation }hanging-punctuationNoNoNoNoNoNo
punctuation-trim : sTrim }punctuation-trimNoNoNoNoNoNo
ruby-align : sRubyAlign }ruby-alignYesYesYesYesYesYes
ruby-overhang :sRubyOverhang }ruby-overhangYesYesYesYesYesYes
ruby-position :sRubyPlacement }ruby-positionYesYesYesYesYesYes
ruby-span : sRubySpan }ruby-spanNoNoNoNoNoNo
text-align-last : sAlignLast }text-align-lastPartialPartialPartialPartialPartialPartial
text-emphasis : sEmphasis }text-emphasisNoNoNoNoNoNo
text-justify : sJustify }text-justifyNoYesYesYesYesYes
text-outline : sOutline }text-outlineNoNoNoNoNoNo
text-overflow : sOverflow}text-overflowNoPartialPartialPartialPartialPartial
text-shadow : sShadow }text-shadowNoNoNoNoNoNo
text-wrap : sWrap }text-wrapNoNoNoNoNoNo
word-break : sBreak }word-breakPartialPartialPartialPartialPartialPartial
word-wrap : sWrap }word-wrapYesYesYesYesYesYes
writing-mode : sFlow }writing-modeYesYesYesYesYesYes

Generated Content

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
content : sContent }contentNoNoNoNoYesYes
counter-increment : sCounter }counter-incrementNoNoNoNoYesYes
counter-reset : sCounter }counter-resetNoNoNoNoYesYes
quotes : sQuotes }quotesNoNoNoNoYesYes

Border and Layout

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
border : sBorder }borderYesYesYesYesYesYes
border-bottom :sBottom }border-bottomNoYesYesYesYesYes
border-bottom-color: sColor }border-bottom-colorYesYesYesYesYesYes
border-bottom-style :sStyle }border-bottom-styleNoYesYesYesYesYes
border-bottom-width: sWidth }border-bottom-widthNoYesYesYesYesYes
border-collapse : sCollapse }border-collapsePartialPartialPartialPartialYesYes
border-color : sColor}border-colorYesYesYesYesYesYes
border-left : sLeft }border-leftNoYesYesYesYesYes
border-left-color :sColor }border-left-colorYesYesYesYesYesYes
border-left-style :sStyle }border-left-styleNoYesYesYesYesYes
border-left-width : sWidth }border-left-widthNoYesYesYesYesYes
border-right : sRight}border-rightNoYesYesYesYesYes
border-right-color :sColor }border-right-colorYesYesYesYesYesYes
border-right-style :sStyle }border-right-styleNoYesYesYesYesYes
border-right-width :sWidth }border-right-widthNoYesYesYesYesYes
border-spacing :sSpacing }border-spacingNoNoNoNoYesYes
border-style : sStyle }border-styleNoPartialPartialPartialYesYes
border-top : sTop }border-topNoYesYesYesYesYes
border-top-color :sColor }border-top-colorYesYesYesYesYesYes
border-top-style :sStyle }border-top-styleNoYesYesYesYesYes
border-top-width : sWidth }border-top-widthNoYesYesYesYesYes
border-width : sWidth }border-widthYesYesYesYesYesYes
caption-side : sLocation }caption-sideNoNoNoNoYesYes
clear : sClear }clearYesYesYesYesYesYes
empty-cells : sEmptyCells }empty-cellsNoNoNoPartialYesYes
float : sFloat }floatYesYesYesYesYesYes
margin : sMargin }marginYesYesYesYesYesYes
margin-bottom :sHeight }margin-bottomYesYesYesYesYesYes
margin-left : sWidth }margin-leftYesYesYesYesYesYes
margin-right : sWidth}margin-rightYesYesYesYesYesYes
margin-top : sHeight }margin-topYesYesYesYesYesYes
padding : sPadding }paddingYesYesYesYesYesYes
padding-bottom :sPadding }padding-bottomYesYesYesYesYesYes
padding-left :sPadding }padding-leftYesYesYesYesYesYes
padding-right :sPadding }padding-rightYesYesYesYesYesYes
padding-top :sPadding }padding-topYesYesYesYesYesYes
table-layout : sLayout }table-layoutYesYesYesYesYesYes

CSS3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
border-break : sBreak }border-breakNoNoNoNoNoNo
border-image : sImage }border-imageNoNoNoNoNoNo
border-radius : sRadius }border-radiusNoNoNoNoNoYes
box-shadow : sShadow }box-shadowNoNoNoNoNoYes

Positioning

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
bottom : sBottom }bottomNoPartialPartialPartialYesYes
clip : sClip }clipNoYesYesYesYesYes
display : sDisplay }displayPartialPartialPartialPartialYesYes
height : sHeight }heightYesYesYesYesYesYes
left : sPosition }leftNoPartialPartialPartialYesYes
max-height :sMaxHeight }max-heightNoNoNoYesYesYes
max-width : sWidth }max-widthNoNoNoYesYesYes
min-height :sMinHeight }min-heightNoNoNoYesYesYes
min-width : sMinWidth }min-widthNoNoNoYesYesYes
overflow : sOverflow }overflowPartialPartialPartialYesYesYes
position : sPosition }positionPartialPartialPartialYesYesYes
right : sPosition }rightNoPartialPartialPartialYesYes
top : sTop }topNoPartialPartialPartialYesYes
visibility : sVisibility}visibilityYesYesYesYesYesYes
width : sWidth }widthYesYesYesYesYesYes
z-index : vOrder }z-indexPartialPartialPartialPartialYesYes

CSS3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
overflow-x : sOverflow }overflow-xPartialPartialPartialYesYesYes
overflow-y : sOverflow }overflow-yPartialPartialPartialYesYesYes

Printing

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
orphans : nLines }orphansNoNoNoNoYesYes
page-break-after : sBreak }page-break-afterYesYesYesYesYesYes
page-break-before : sBreak }page-break-beforeYesYesYesYesYesYes
page-break-inside : sBreak }page-break-insideNoNoNoNoYesYes
widows : nLines }widowsNoNoNoNoYesYes

CSS3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
fit : sFit }fitNoNoNoNoNoNo
fit-position : sPosition }fit-positionNoNoNoNoNoNo
image-orientation : sOrientation }image-orientationNoNoNoNoNoNo
page : sPage }pageNoNoNoNoNoNo
size : sSize }sizeNoNoNoNoNoNo

User Interface

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
cursor : sCursor }cursorNoYesYesYesYesYes
outline : sOutline }outlineNoNoNoNoYesYes
outline-color : sColor }outline-colorNoNoNoNoYesYes
outline-style : sStyle }outline-styleNoNoNoNoYesYes
outline-width : sWidth }outline-widthNoNoNoNoYesYes

CSS3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
appearance : sAppearance }appearanceNoNoNoNoNoNo
box-sizing : sSizing }box-sizingNoNoNoNoYesYes
icon : sIcon }iconNoNoNoNoNoNo
nav-down : sNavDown }nav-downNoNoNoNoNoNo
nav-index : sIndex }nav-indexNoNoNoNoNoNo
nav-left : sNavLeft }nav-leftNoNoNoNoNoNo
nav-right : sNavRight }nav-rightNoNoNoNoNoNo
nav-up : sNavUp }nav-upNoNoNoNoNoNo
outline-offset : sOffset }outline-offsetNoNoNoNoNoNo
outline-radius : sRadius }outline-radiusNoNoNoNoNoNo
resize : sResize }resizeNoNoNoNoNoNo

Multi-column Layout

Internet Explorer does not support any of the CSS3 multi-column layout properties.

Speech

Internet Explorer does not support any of the CSS3 speech properties.

Media Queries

The following CSS3 media query properties are supported in Internet Explorer 9:

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution

Values

Numbers

CSS 2.1:

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

CSS3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
<angle>NoNoNoNoNoYes
<time>NoNoNoNoNoYes
<frequency>NoNoNoNoNoNo

Strings

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
<string>YesYesYesYesYesYes
\codeNoNoYesYesYesYes

Shapes

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
rect()NoYesYesYesYesYes

Functions

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
url()YesYesYesYesYesYes
counter()NoNoNoNoYesYes
attr()NoNoNoNoYesYes

CSS3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
calc()NoNoNoNoNoYes

Colors

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
<color> (names)YesYesYesYesYesYes
<color> (#rrggbb or #rgbNotation)YesYesYesYesYesYes
<color> (rgb(r,g,b)Notation)YesYesYesYesYesYes
<color> (system colors)YesYesYesYesYesYes
transparentNoNoPartialYesYesYes

CSS3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
<color> (rgba(r,g,b,a)Notation)NoNoNoNoNoYes
<color> (hsl(h,s,l)Notation)NoNoNoNoNoYes
<color> (hsla(h,s,l,a)Notation)NoNoNoNoNoYes

Keywords

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
autoNoNoPartialYesYesYes
inheritNoNoNoNoYesYes

CSS3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
initialNoNoNoNoNoNo

Units

The following units are supported in Internet Explorer 3.0 and later:

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

The following CSS3 units are supported in Internet Explorer 9:

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

The following units are not supported in any version of Internet Explorer:

  • Hz
  • kHz
  • gd

See Also