使用 display:table,table-row,table-cell 时出现一些奇怪的 CSS 行为
当表格单元格包含空 div 时,它会将其旁边的单元格的内容下推。
<html>
<body>
<div style="height:200px">
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div style="height:100px;width:200px;overflow-y:scroll"></div>
</div>
<div style="display:table-cell">
<div style="height:100px;width:100px;overflow-y:scroll">Why am I getting pushed down?!?</div>
</div>
</div>
</div>
</div>
<div style="height:200px">
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div style="height:100px;width:200px;overflow-y:scroll">A</div>
</div>
<div style="display:table-cell">
<div style="height:100px;width:100px;overflow-y:scroll">Suddenly I'm not getting pushed down?!?</div>
</div>
</div>
</div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
如果我在 DIV 中放入一些内容,行为就会停止。这是一个错误吗?影响 Firefox 和 Chrome。如果这不是一个错误,我该如何解决它?