html - 表格内div的自动1px宽度

Question

这发生在 Chrome (43.0.2357.124) 和 Safari (5.1.7) 中，但不会发生在 Firefox 或 Internet Explorer 中。

出于某种原因，<div>以下代码中的元素自动宽度为 1px。

table, tbody, tr, td, div {
    padding: 0;
    margin: 0;
    border: 0;
}
table, tbody, tr, td {
    border-spacing: 0;
    border-collapse: collapse;
}

<table><tbody><tr><td><div></div></td></tr></tbody></table>

应用 display: inline-block; 时也会发生同样的情况和 width: 100%;到 <div>模拟 display:block额外的好处是<td>高度为 18px。

table, tbody, tr, td, div {
    padding: 0;
    margin: 0;
    border: 0;
}
table, tbody, tr, td {
    border-spacing: 0;
    border-collapse: collapse;
}
div {
    display: inline-block;
    width: 100%;
}

<table><tbody><tr><td><div></div></td></tr></tbody></table>

我知道申请 width: 0;到 <div>解决了这个问题，所以我不是在寻找一种方法来删除自动宽度。我只是好奇为什么会这样。这是浏览器错误还是由于 block 元素的某些自动样式而发生？

当 <div> 时也会发生类似的事情。不存在于 DOM 中。当 <td>为空，所有父元素的宽度为 1px，而 <td>宽度为 0。

table, tbody, tr, td {
    padding: 0;
    margin: 0;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

<table><tbody><tr><td></td></tr></tbody></table>

问题似乎不是来自任何常见问题:填充、边距或边框，所以我不明白为什么 div 的宽度为 1px。

Answer 1

看起来 div 的大小是根据其父级的大小调整的 - td 在这种情况下(td 宽度为 1px，您可以删除 div 以查看)，这是 div 的默认行为。
将它放在 td 中有点像打开潘多拉盒子 - div 根据其父元素获取其宽度，但 td 大小取决于其内容。
不同的浏览器似乎以不同的方式实现它，1px 宽度代表 webkit 确定空表格单元格大小的方法。