css 테이블 행 내부의 100 % 늘어난 테이블이 IE에서 실패 함

문제 : IE에서 테이블 행 내부의 테이블을 100 % 너비/높이로 늘이기가 작동하지 않습니다. 왜?! 여기 css 테이블 행 내부의 100 % 늘어난 테이블이 IE에서 실패 함

HTML :

<body> 
    <div id="row"> 
     <div id="table"> 
      this table should be 100% width/height, green color<br/> 
      It works in ANY browser except IE.<br/> 
      WHY?! 
     </div> 
    </div> 
</body>

CSS :이 코드는 IE를 제외한 모든 브라우저에서 작동

html, body { 
    position:relative; 
    width:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
} 
body { 
    display:table; 
} 
#row { 
    display:table-row; 
    width:100%; 
    height:100%; 
    background:#f00; 
} 
#table { 
    display:table; 
    width:100%; 
    height:100%; 
    background:#0f0; 
}

(7,8,9,10-) . 누구나 CSS를 사용하여이 문제를 해결할 수 있습니다.

출처

2013-07-11 Julius Loa

IE 버전을 다음과 같이 그러나 해결책은? – falguni

7,8,9,10에서 테스트 됨 - 작동하지 않음. 그래서 기본적으로 그것은 IE에서 전혀 작동하지 않습니다. –

다른 누군가가 이와 똑같은 문제를 겪고 있고 부모 div (디스플레이 : 테이블이있는 것)에 최소 높이 (1px 일 수 있음)를 설정하여 해결했습니다. – Lorentz

인터넷 익스플로러의 멋진 아름다움, 인내심 테스트는 많은 개발자를위한


html, body { 
    position:relative; 
    width:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
} 
#table { 
    position: relative; 
    display:table; 
    width:100%; 
    height:100%; 
    background:lightgreen; 
} 

body { 

} 
#row { 
    width:100%; 
    height:100%; 
    position: static; 
    display:block; 
    background:lightblue; 
    text-align:center; 
    float: center; 
    top:100%; 
}

출처

2013-07-11 15:40:37

그래서? 당신의 솔루션을 시도 했습니까? 그것은 전혀 작동하지 않습니다 : D –

이것은 업데이트입니다. DOCTYPE을 선언해야합니다. –

css 테이블 행 내부의 100 % 늘어난 테이블이 IE에서 실패 함

답변

관련 문제