스매싱 매거진에 잘 정리된 글이 있어서, 번역해서 올려봅니다
http://coding.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

IE6 검수를 끝내고 IE7 시대(?)를 여는 지금 다시 살펴볼만한 속성들이 많은 것 같아서요.

물론 IE6에서 지원하지 않는 속성들을 사용할 것인가에 대해서는 난상토론같은게 한번 필요하지 않을까 싶네요.

 



[선택자 & 상속]

자식 선택자

예시
image
설명

자식 선택자는 부모 요소의 직계 자식(손자는 제외)을 모두 선택합니다.
위의 예에서는 body가 부모이고, p가 자식입니다.

지원여부
IE6 No
IE7 Yes
IE8 Yes
버그

IE7 에서는 부모와 자식사이에 주석이 있다면 동작하지 않습니다.

 

체인 선택자

예시

image

설명

체인선택자는 아래와 같이 한 요소에 여러개의 클래스가 지정된 경우에 사용합니다.

<div class="class1 class2 class3">
	<p>Content here.</p>
	</div>
	
지원여부
IE6 No
IE7 Yes
IE8 Yes
버그

얼핏보면 IE6 에서도 지원하는 것 같아보이나, 사실은 체인의 마지막 클래스가 부여 되어 있다면 무조건 적용해 버립니다.
3개의 클래스가 모두 주어졌을 때만 적용되어야 정상동작입니다.

 

속성 선택자

예시

image

설명

속성 선택자는 요소에 어떤 속성(attribute)이 주어졌는지를 판단하여 적용됩니다.

위의 예에서는 href 속성을 가진 a 태그에만 적용됩니다.

(input의 경우 [type=checkbox], [type=radio], [type=password] 등으로 적용할 수 있어 유용합니다.)

지원여부
IE6 No
IE7 Yes
IE8 Yes

 

인접 형제 선택자

예시
image

설명

인접 형제 선택자는 앞에 지정된 요소 이후로 가장 근접한 하나의 형제요소에만 적용됩니다.

위의 예제 코드는 h1 이후로 가장 근접한 p요소 만을 찾습니다.

예를들어:

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

위의 코드에서는 첫번째 p에만 해당 CSS가 적용되고 두번째에는 적용되지 않습니다.

지원여부
IE6 No
IE7 Yes
IE8 Yes
버그

IE7 에서는 부모와 자식사이에 주석이 있다면 동작하지 않습니다.

 

형제 선택자

예시

image

설명

형제 선택자는 앞에 지정된 요소 이후의 모든 형제요소에 적용됩니다.

예를들어:

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

위의 코드의 경우 두개의 p에 모두 적용됩니다.

다만, 헤딩 앞에 있는 p에는 적용되지 않습니다.

지원여부
IE6 No
IE7 Yes
IE8 Yes



[가상 클래스 & 가상 컨텐츠]

 

:hover 뒤에 따라오는 자손 선택자(공백)

예시
image

설명

:hover 가 작동하는 경우에 한해서 하위 자손에게 속성을 줄 수 있습니다.

지원여부
IE6 No
IE7 Yes
IE8 Yes

 

체인 가상 클래스

예시
image

설명

가상 클래스를 연속적으로 이어서 사용할 수 있습니다.

위의 예시에서는 첫째 a가 hover 되었을 때만 적용됩니다.

지원여부
IE6 No
IE7 Yes
IE8 Yes

 

a가 아닌 다른 태그에서의 :hover 사용

예시
image

설명

IE6에서는 a에서만 가상 클래스를 사용할 수 있었으나, IE7 이후부터는 다른 요소에서도 사용 가능합니다.

지원여부
IE6 No
IE7 Yes
IE8 Yes

 

:first-child

예시
image

설명

첫번째 요소에만 적용됩니다.

지원여부
IE6 No
IE7 Yes
IE8 Yes
버그

IE7 에서는 부모와 자식사이에 주석이 있다면 동작하지 않습니다.

 

:focus

예시
image

설명

브라우저 포커스를 받은 요소에 적용됩니다.

지원여부
IE6 No
IE7 No
IE8 Yes

 

가상 컨텐츠 (:before, :after)

예시

image

설명

지정한 요소에 가상의 컨텐츠를 추가합니다.

content 속성이 있어야만 유효합니다.

지원여부
IE6 No
IE7 No
IE8 Yes



[속성 지원]

포지셔닝에 의한 가상 영역 설정

예시
image

설명

toprightbottom, left 값을 절대값으로 준 요소는 width, height가 지정되어있지 않더라도 가상의 영역이 설정됩니다.

지원여부
IE6 No
IE7 Yes
IE8 Yes

 

Min-Height & Min-Width

예시
image

설명

최소 넓이, 최소 높이 값을 설정합니다.

지정된 값보다 커질 수는 있으나 작아질 수 없습니다.

지원여부
IE6 No
IE7 Yes
IE8 Yes

 

Max-Height & Max-Width

예시
image

설명

최대 넓이, 최대 높이 값을 설정합니다.

지정된 값보다 작아질 수는 있으나 커질 수 없습니다.

지원여부
IE6 No
IE7 Yes
IE8 Yes

 

 

투명 Border Color

예시
image
설명

투명한 보더 값을 사용할 수 있습니다.

지원여부
IE6 No
IE7 Yes
IE8 Yes

 

Fixed-Position

예시

image

설명

요소의 위치를 시점에 고정시킵니다.

지원여부
IE6 No
IE7 Yes
IE8 Yes

 

시점에 따른 Fixed-Position Background

예시
image

설명

배경 속성이 시점에 고정되도록 할 수 있습니다.

지원여부
IE6 No
IE7 Yes
IE8 Yes
버그

IE6에서는 root 요소(html)에서만 적용됨.

 

inherit 속성 값

예시
image

설명

해당 요소를 감싸고 있는 부모 요소에 지정된 해당 속성값을 상속 받게 됩니다.

지원여부
IE6 No
IE7 No
IE8 Yes
버그

IE6, IE7 에서는 방향 설정과 visibility 설정에서만 적용됩니다.

 

테이블에서의 Border Spacing

예시
image

설명

셀과 셀 사이의 간격을 설정합니다.

지원여부
IE6 No
IE7 No
IE8 Yes

 

표에서 빈 셀의 표시여부 설정

예시
image

설명

빈셀의 border와 배경을 보여줄 것인지 아닌지를 선택할 수 있습니다.

지원여부
IE6 No
IE7 No
IE8 Yes

 

테이블 Caption의 수직 위치 설정

예시
image

설명

테이블 caption의 위치를 기본 값인 top 대신 botttom으로 줄 수 있습니다.

지원여부
IE6 No
IE7 No
IE8 Yes

 

영역 클리핑

예시
image

설명

특정영역을 클리핑 할 수 있습니다.

해당 요소에서 클리핑 된 영역만 보여지게 됩니다.

지원여부
IE6 No
IE7 No
IE8 Yes
버그

흥미롭게도 IE6, IE7 에서는 컴마 대신 띄어쓰기를 하면 사용이 가능합니다. (이런 문법은 거의 사라지고 있는 추세입니다.)

 

인쇄 스타일에서의 고아(orphans), 과부(widows) Text

예시

image

설명

orphans 속성은 인쇄된 페이지 하단에 보여줄 최소 라인수를 설정합니다.

widows 속성은 인쇄된 페이지 상단에 보여줄 최소 라인수를 설정합니다.

(왜 고아와 과부라는 이름이 붙었는지는 모르겠습니다.)

지원여부
IE6 No
IE7 No
IE8 Yes

 

박스 안에서의 Page Break

예시
image

설명

이 속성은 해당 요소 안에서 page break가 발생할 지의 여부를 설정합니다.

(break는 떨어짐 현상을 의미합니다.)

지원여부
IE6 No
IE7 No
IE8 Yes

 

Outline 속성

예시
image

설명

outline은 outline-styleoutline-widthoutline-color의 속성을 축약형으로 줄인 표기법입니다.

이 속성은 문서 flow에 영향을 미치지 않는 border를 만들어 냅니다.

(즉, 이 속성을 사용하면 박스모델에 영향을 미치지 않습니다.

outline이 들어가더라도 근접한 요소들이 밀려나지 않으므로, focus 표시를 할 때 유용하게 사용할 수 있습니다.)

지원여부

IE6 No
IE7 No
IE8 Yes

 

추가된 display 속성들

예시
image

설명

inline-block은 블럭요소를 인라인과 같이 취급되도록 합니다.

그 외에도 다음과 같은 속성들이 사용 가능합니다:

  • 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 No
IE7 No
IE8 Yes

 

여백 접기 핸들링

예시
image

설명

white-space 속성에서 사용할 수 있는 값인 pre-line는 한 영역 안에 여러개의 공백이 들어갈 수 없게 합니다.

(여백을 접는다고 표현하여 Collapse라는 단어를 사용합니다.)

pre-wrap 값은 한 영역 안에 여러개의 공백이 들어갈 수 있게 합니다

지원여부
IE6 No
IE7 No
IE8 Yes



[그 외 자잘한 테크닉]

@import 에서의 미디어 타입

예시

image

설명

삽입된 스타일시트 파일 지정뒤에 미디어타입을 붙여서 해당 미디어에만 적용 할 수 있습니다.

지원여부
IE6 No
IE7 No
IE8 Yes
버그

IE6, IE7 에서는 미디어 타입이 지정되면 @import 선언 자체를 통채로 무시합니다.

 

카운터 형식 설정

예시
image

설명

가상 컨텐츠를 사용하여 CSS로 카운터를 붙일 수 있습니다.

(OL에서와 같은 방식으로 카운터가 붙습니다.)

지원여부
IE6 No
IE7 No
IE8 Yes



[그 외 버그 및 호환되지 않는 부분]

위에서 설명하지 않은 버그들입니다.

IE6 버그

  • abbr 태그를 스타일링 할 수 없습니다.
  • 하이픈(-)이나 언더스코어(_)로 시작되는 클래스나 ID를 지원하지 않습니다.
  • select 태그는 z-index가 먹지 않고 언제나 최상위 레이어로 나타납니다.
  • a의 가상 클래스가 순서대로 지정되지 않았다면 :hover 는 무시됩니다. (:link:visited:hover)
  • !important을 사용하여도 같은 방식(same rule)으로 같은 속성을 다시 정의하면 값이 덮어 써집니다.
  • height가 마치 min-height 처럼 동작합니다.
  • width가 마치 min-width 처럼 동작합니다.
  • 요소가 플롯된 방향과 같은 방향으로 margin을 주면 두배의 값이 적용됩니다.
  • Dotted border 가 dashed border와 같은 모양으로 나타납니다.
  • text-decoration:line-through (가운데 줄 긋기)가 다른 브라우저보다 위쪽에 나타납니다.
  • OL의 리스트 카운터 표시가 제대로 동작하지 않습니다.
  • 표준에 정의된 list-style-type 에서 사용 가능한 모든 값을 사용할 수 없습니다.
  • 플롯된 경우 list-style-image로 정의된 리스트 아이템이 나타나지 않습니다.
  • @font-face를 일부만 지원합니다. (eot 이야기인듯)
  • 어떤 선택자들은 오동작합니다. (Some selectors will wrongly match comments and the doctype declaration)
  • ID 선택자에 사용되지 않은 클래스를 붙였을 때, 같은 ID에 다른 클래스를 붙인 스타일지정도 무시됩니다.

IE7 버그

  • OL의 리스트 카운터 표시가 제대로 동작하지 않습니다.
  • 표준에 정의된 list-style-type 에서 사용 가능한 모든 값을 사용할 수 없습니다.
  • 플롯된 경우 list-style-image로 정의된 리스트 아이템이 나타나지 않습니다.
  • @font-face를 일부만 지원합니다. (eot 이야기인듯)
  • 어떤 선택자들은 오동작합니다. (Some selectors will wrongly match comments and the doctype declaration)

여기에 언급되지 않은 IE 버그들은 특정 상황에서만 발생하는 것들이거나, 특정 속성이나 값에서 발생하는 것이 아닌 버그들입니다.

그 밖의 자세한 내용들을 더 알고 싶으면 아래 자료들을 참조하세요.