다른 divs의 가로 맞춤

Question

이것은 문제가 아니며 해결 방법이지만이 문제가 왜 발생하는지 설명 할 수 있습니다. divs (white-space = nowrap이있는 행 래퍼와 display = inline-block이있는 셀)를 사용하여 테이블을 만들었습니다. 헤더 행과 나머지 테이블은 ID가 다른 두 개의 컨테이너 div에 있습니다.

코드는 다음과 같다 : 아무리 무슨 짓을

#header_wrapper { 
position:absolute; 
top:100px; 
height:100px; 
width:100%; 
} 

#table_content_wrapper { 
position:absolute; 
top:200px; 
bottom:0; 
width:100%; 
} 

#header_row { 
height:100%; 
white-space:nowrap; 
} 

#column_row { 
height:100px; 
white-space:nowrap; 
} 

.column_cellN (all equal) { 
height:100%; 
width:10%; 
display:inline-block; 
white-space:normal; 
} 

, 헤더 세포와 테이블 행 세포가 잘못 정렬했다 :

<div id="main_container"> 
    <div id="header_wrapper"> 
    <div id="header_row"> 
     <div class="column_cell1">...</div> 
     <div class="column_cell2">...</div> 
     ...other cells... 
    </div> 
    </div> --closed the header container 
    <div id="table_content_wrapper"> 
    <div id="table_row"> 
     <div class="column_cell1">...</div> 
     <div class="column_cell2">...</div> 
     ...other cells identical classes as the header... 
    </div> 
    ...several other table rows... 
    </div> --closed the table container 
</div> --closed the main container 

CSS는이처럼 보였다 없습니다. 그것들을 똑같이 보이게하는 유일한 방법은 헤더 행 래퍼와 테이블 행 래퍼에 동일한 div ID를 할당하는 것입니다.

가장 이상한 것은 크롬의 개발자 도구가 헤더와 테이블의 다양한 셀의 픽셀 폭이 같지만 실제로 브라우저에서 다르게 렌더링된다는 것입니다. IE에서도 마찬가지입니다.

누군가 이런 일이 일어나는 이유를 알고 있습니까?

Answer 1

저에게 맞습니다. 당신은 당신이 살아있는 예제를 제공하면 좋을 것에 대한 답변을 원하는 경우에 #header_wrapper {position:relative;}