水平对齐的div不同

Question

这不是一个问题，它是一个解决方案，但也许你可以解释为什么会发生这种情况。我使用div（使用white-space = nowrap的行封装和使用display = inline-block的单元格）构建了一个表。标题行和表格的其余部分位于两个不同ID的容器div中。

的代码是这样的：

<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看起来像：

#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分配给标题行包装器和表格行包装器。

最奇怪的是，chrome中的开发人员工具报告表头和表格中的各个单元具有相同的像素宽度，但实际上它们在浏览器中呈现的方式不同。在IE中也有同样的行为。

有人知道为什么会发生这种情况吗？

Answer 1

适合我。如果您想，这将是更好，如果你提供了一个活生生的例子回答#header_wrapper {position:relative;}