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

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

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

[선택자 & 상속]

자식 선택자

예시

설명

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

지원여부

버그

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

체인 선택자

예시

설명

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

<div class="class1 class2 class3">
	<p>Content here.</p>
	</div>
	

지원여부

버그

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

속성 선택자

예시

설명

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

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

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

지원여부

인접 형제 선택자

예시

설명

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

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

예를들어:

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

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

지원여부

버그

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

형제 선택자

예시

설명

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

예를들어:

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

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

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

지원여부

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

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

예시

설명

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

지원여부

체인 가상 클래스

예시

설명

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

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

지원여부

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

예시

설명

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

지원여부

:first-child

예시

설명

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

지원여부

버그

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

:focus

예시

설명

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

지원여부

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

예시

설명

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

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

지원여부

[속성 지원]

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

예시

설명

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

지원여부

Min-Height & Min-Width

예시

설명

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

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

지원여부

Max-Height & Max-Width

예시

설명

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

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

지원여부

투명 Border Color

예시

설명

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

지원여부

Fixed-Position

예시

설명

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

지원여부

시점에 따른 Fixed-Position Background

예시

설명

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

지원여부

버그

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

inherit 속성 값

예시

설명

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

지원여부

버그

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

테이블에서의 Border Spacing

예시

설명

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

지원여부

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

예시

설명

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

지원여부

테이블 Caption의 수직 위치 설정

예시

설명

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

지원여부

영역 클리핑

예시

설명

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

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

지원여부

버그

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

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

예시

설명

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

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

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

지원여부

박스 안에서의 Page Break

예시

설명

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

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

지원여부

Outline 속성

예시

설명

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

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

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

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

지원여부

추가된 display 속성들

예시

설명

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

지원여부

여백 접기 핸들링

예시

설명

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

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

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

지원여부

[그 외 자잘한 테크닉]

@import 에서의 미디어 타입

예시

설명

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

지원여부

버그

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

카운터 형식 설정

예시

설명

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

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

지원여부

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

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

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 버그들은 특정 상황에서만 발생하는 것들이거나, 특정 속성이나 값에서 발생하는 것이 아닌 버그들입니다.

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