CSS显示:表格单元格中的第一个元素不是文本时表格中断
我正在使用display:table来创建嵌套的行和列集的布局.我注意到,当表格单元格中的第一个元素不是文本时,列的对齐似乎会中断.不可否认,我还没有测试过哪个元素导致了这个问题,但是这个JSFiddle中有一个例子:http://jsfiddle.net/ekx4v/
码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:200px;
height:200px;
display:table;
}
#column1 {
display:table-cell;
background-color:blue;
}
#column2 {
display:table-cell;
background-color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="column1">
Col1
<form>
<select size="2">
<option>Options go here...</option>
</select>
</form>
</div>
<div id="column2">Col2</div>
</div>
</body>
</html>
删除"Col1"文本会导致第二列不对齐.如果这不能在其他浏览器上重现,这里有一些在Chrome中截取的屏幕截图:
使用"Col1":
没有"Col1":
我在Firefox中得到了相同的结果.这是预期的行为吗？如果是这样,是否有一个解决方法,以便我不必在每个div的开头放置文本？
这完全是由于vertical-align默认值baseline,它是预期的行为,因为您的示例具有非常不同的字母基线.实际上,如果没有文本内容,div则没有字母基线,因此根据规范,框的底部与父级的字母基线对齐.
值得庆幸的是,解决方法很容易:
#container > div {
vertical-align:top;
}
这是一个相关的答案(查看最后一节),虽然你的用例有点不同:
简单地说,当没有文本内容时,您的select元素将与父级的字母基线对齐.这会将父母的字母基线向下推,这样select仍然可以放在父母的内部,使其底部与父母的字母基线对齐.所有其他divs'基线仍然与此基线对齐,该基线已被下推select.
通过在form元素之前添加文本内容,您div将拥有一个字母基线,该基线不会将父级的基线推送到select.div与前一种情况一样,所有s'基线仍然与父母的字母基线对齐,但这次父母的基线没有被推下.
这是上面两段的粗略演示(谨防疯狂的MS-Paint技能):
如您所见,在第二种情况下,父select元素的基线被向下推,因此元素仍然可以适合父元素,同时其底部与父元素的基线对齐.
vertical-align:top使浏览器免于遵守这些复杂的规则.当将它应用于浮动/内联块/表格内容时,它也可以避免许多麻烦.