Question

这种情况发生在Chrome（43.0.2357.124）和Safari（5.1.7）中，但不适用于Firefox或Internet Explorer。

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

＆＃13;

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

＆＃13;

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

＆＃13;

将display: inline-block;和width: 100%;应用于<div>以模拟display:block时会发生同样的情况，<td>的高度为18px。

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

我知道将width: 0;应用于<div>可解决问题，因此我并未寻找删除自动宽度的方法。我只是好奇为什么会这样。这是一个浏览器错误还是由于块元素的一些自动样式而发生这种情况？

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

＆＃13;

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

＆＃13;

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

＆＃13;

问题似乎不是来自任何常见问题：填充，边距或边框，因此我无法理解为什么div的宽度为1px。

Answer 1

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

表内自动1px宽度的div

1 个答案: