我只是偶然发现了一个非常奇怪的行为，它的布局使用了 table-cell css 属性。我在当前的 FF、Safari 和 Chrome 中尝试了以下代码。行为在任何地方都是一样的。
我的问题 是是否有人知道为什么会发生这种情况。这是浏览器错误还是定义的行为？我发现了 this 问题，它暗示了如何解决问题，但我更想知道为什么会发生这种情况。我想其他人也想知道。
问题: 如果我在第二个表格单元格中的 中添加注释，则一切正常。但是，如果 div 保持为空，则其他两个单元格的内容具有类似于“偏移顶部”的内容。此偏移量与中间单元格的高度具有相同的尺寸。 IE。外部单元格的内容移到底部。我添加了两个截图 div_not_empty.png 和 div_empty.png。
谢谢
更新
我忘记截图了。他们来了:
代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Strange behavior with table-cell formatting</title>
<style type="text/css" media="screen">
#table {
display: table;
background: #efefef;
}
div.cell {
display: table-cell;
}
#c1 div.content {
width: 200px;
}
#c2 {
border-left: 2px solid #ccc;
}
#c2 div.content {
height: 150px;
width: 150px;
background: #aaa;
vertical-align: bottom;
}
#c3 {
width: 200px;
border-left: 2px solid #ccc;
}
</style>
</head>
<body>
<div id="table">
<form id="c1" class="cell">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut.
</div>
</form>
<div id="c2" class="cell">
<div class="content">
<!-- -->
</div>
</div>
<div id="c3" class="cell">
<div class="content">
Dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit.
</div>
</div>
</div>
</body>
</html>
最佳答案
这与 vertical-align: bottom 的计算方式有关 - 请参阅 mdc docs ，当应用于表格单元格时，bottom“将单元格的底部填充边缘与行的底部对齐”。
当表格单元格没有内容时，不会在框中绘制填充(即当为 0 时，如果有内容，浏览器会计算填充的位置)。
使用 元素，有内容可用作对齐的基础；如果没有它，您会注意到浏览器将元素本身的底部与其他元素中第一行内容的底部对齐。
回复:您链接到的问题，使用 vertical-align: top 有效，因为布局是根据块元素的顶部计算的，而不是它们包含的内容。
解决此问题的一个简单方法是向样式表中的 .content div 添加填充，然后使它们呈现为好像它们有内容一样，这意味着当没有任何内容可显示时，您不需要在代码中包含 :
div.content {
height: 150px;
padding-bottom: 1px;
}
试试这个，你会看到它的行为符合你的预期。
所以;不是真正的浏览器错误，因为浏览器试图根据元素的内容(或填充的底部)计算位置，而该元素没有内容。在这种情况下，可能是规范的意外副作用。
在相关说明中，您的 css 规则
div.cell 与作为 form 元素的第一个“单元格”不匹配。它有效是因为 display: table 元素内的所有元素都自动应用了 display: table-cell，但不是最好的。关于html - 表格单元格布局和空 div 的奇怪行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13594033/