relative div가 부모 테이블 셀과 겹치다

Question

테이블 셀 안에 div가있는 문제가 있습니다. 셀의 높이는 고정이고 div는 높이 : 100 %로 상대적으로 배치됩니다. 난 DIV 콘텐츠 및 DIV 높이는 셀 높이보다 커진다 변경할 때

td { 
    height:80px; 
    width: 80px; 
} 
.cell_text { 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    height: 100%; 
    position:relative; 
} 

jsfiddle example

문제가 나타난다.

그리고 다음 그림은 크롬의 행동을 보여줍니다 : IE와 FF에 대한 행동은 다음과 같습니다 내가 그것을 같은 방식으로 작동 할 수있는 방법,

크롬의 행동이 정확히 내가 필요로 무엇을 IE와 FF에서?

Answer 1

Firefox는 셀 동작을 제어 할 수있는 몇 가지 가능성을 제공하지만 IE7을 지원해야하는 경우 운이 좋지 않습니다. IE7 이하에서는 display: table-cell;이 작동하지 않습니다.

Answer 2

불필요한 마크 업과 CSS를 제거 했으므로 이제는 문제가 없습니다.

position: relative 실제로는별로 의미가 없었으며 border-fix div는 불필요한 것처럼 보였습니다. 또한 문제를 일으켰습니다. 테이블 (및 display: table-cell 등이있는 요소)은 height과 같이 매우 유연합니다.이 경우처럼 간단한 블록 요소가 아닐 수도 있습니다.

많은 CSS가 중복되었으므로 the Fiddle을 참조하십시오. Chrome, FF, IE9에서 테스트되었습니다.

<td class="border"> 
    <div class="cell_wrapper"> 
     <div class="cell_text"> 
      line-1 
     </div> 
    </div> 
</td> 

그리고 관련 CSS :

이 코멘트를 했어야

#mytable td { 
    height:80px; 
    width: 80px; 
    text-align: center; 
} 

.cell_wrapper { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

.cell_text { 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    height: 100%; 
}