IE가 CSS 상속을 이해하지 못합니다.

Question

인터넷 익스플로러에 문제가 있습니다. 물론 다른 브라우저에서도 잘 작동합니다. 그래서 나는 CSS 클립을 가지고있다. 나는 왼쪽, 중간 및 오른쪽 부분을 가지고 있지만 세 가지 다른 색 구성표가있는 프레임과 같은 것을 만들고 있습니다. 그래서 나는 9 개 가지 클래스를 만들고 싶어하지 않고 나는이 예제와 CSS 전원을 사용 :

.container-header .left { /* Some styles here... */ } 
.container-header .left.style1 { /* Some styles here... */ } 
.container-header .left.style2 { /* Some styles here... */ } 
.container-header .left.style3 { /* Some styles here... */ } 

.container-header .middle { /* Some styles here... */ } 
.container-header .middle.style1 { /* Some styles here... */ } 
.container-header .middle.style2 { /* Some styles here... */ } 
.container-header .middle.style3 { /* Some styles here... */ } 

.container-header .right { /* Some styles here... */ } 
.container-header .right.style1 { /* Some styles here... */ } 
.container-header .right.style2 { /* Some styles here... */ } 
.container-header .right.style3 { /* Some styles here... */ } 

모든 것이 완벽했다 그리고 내가 Internet Explorer를 열었다. 내 HTML에서 나는 다음과 같은 간단한 구성을 가지고

<div class="container-header"> 
    <div class="left style1"></div> 
    <div class="middle style1"></div> 
    <div class="right style1"></div> 
</div> 

문제는 IE가 자신의 의견을 가지고와 코드의 마지막 요소 전에 CSS 스타일을 모두 생략 한 것입니다. 내 말은 왼쪽 스타일 1 및 중간 스타일 1이 오른쪽 스타일 1 스타일로 렌더링됨을 의미합니다. IE 스타일을 읽지 않고 건너 뛰지 않는 방법을 모르겠습니다. 아무도 그의 의견을 쓰지 않으면 나는 매우 행복해 할 것입니다. 고마워요 :)

PP : 내 나쁜 영어에 대한 죄송합니다. :(

Answer 1

귀하의 페이지가 쿼크 모드에 아마, 그래서 표준 모드로 렌더링하는 당신은 당신의 페이지에 DOCTYPE 선언을 추가해야합니다. IE에서

쿼크 모드가 읽기 전용으로 일으키는 버그가

마지막 클래스 선택기의 체인 클래스, 그래서 그것은 다음과 같은 규칙을 치료하는 것 :

.container-header .left { /* Some styles here... */ } 
.container-header .style1 { /* Some styles here... */ } 
.container-header .style2 { /* Some styles here... */ } 
.container-header .style3 { /* Some styles here... */ } 

.container-header .middle { /* Some styles here... */ } 
.container-header .style1 { /* Some styles here... */ } 
.container-header .style2 { /* Some styles here... */ } 
.container-header .style3 { /* Some styles here... */ } 

.container-header .right { /* Some styles here... */ } 
.container-header .style1 { /* Some styles here... */ } 
.container-header .style2 { /* Some styles here... */ } 
.container-header .style3 { /* Some styles here... */ } 

이것은 또한 유일한 해결 방법은 당신의 HTML 요소에 고유의 클래스를 할당하는 것입니다있는 표준 모드에서 IE6에 영향을 참조하십시오. 예 : this answer

부수적으로 이것은 상속 오류는 아니지만 계단식 오류 (또는 잘못된 계단식을 초래하는 선택기 구문 분석 오류)입니다.