表格单元格布局和空div的奇怪行为
我只是偶然发现了一个使用table-cellcss属性的布局非常奇怪的行为.我在当前的FF,Safari和Chrome中尝试了以下代码.到处都是一样的行为.
我的问题是,是否有人知道为什么会这样.它是浏览器错误还是已定义的行为？我发现这个问题,这对如何解决问题的提示,但我宁愿想知道这是为什么首先发生.我想其他人也想知道.
问题:如果我在 第二个表格中注释,一切都很好.然而,如果div保持为空,则另外两个单元格的内容具有类似"偏移顶部"的内容.该偏移具有与中间单元的高度相同的尺寸.即外部细胞的内容向底部移动.我添加了两个截图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文档,当应用于表格单元格时,bottom"将单元格的底部填充边缘与行的底部对齐".
当表格单元格没有内容时,框中不会绘制填充(即,当为0时,如果有内容,则浏览器计算填充的位置).
使用 元素,有内容可用作对齐的基础; 没有它你会注意到浏览器将元素本身的底部与其他元素中第一行内容的底部对齐.
re:您链接到的问题,使用vertical-align: top作品,因为布局是根据块元素的顶部计算的,而不是它们包含的内容.
解决这个问题的一个简单方法是在样式表中的.content div中添加填充,然后使它们呈现就好像它们有内容一样,这意味着 当没有任何内容显示时你不需要代码:
div.content {
height: 150px;
padding-bottom: 1px;
}
尝试这个,你会发现它的行为与你期望的一样.
所以; 不是真正的浏览器错误,因为浏览器试图根据元素的内容(或填充的底部)计算位置,并且元素没有内容.可能是这种情况下规范的无意识的副作用.
在相关的说明中,您的css规则div.cell与作为form元素的第一个"单元格"不匹配.这是有效的,因为元素中的所有元素display: table都已display: table-cell自动应用,但不是最好的.
| 归档时间： |
|
| 查看次数： |
2038 次 |
| 最近记录： |