html - 带有 `position: absolute` 的内部按钮将放置在 table 外面

Question

HTML:

<br/><br/><br/><br/><br/>

<table>
<tr>
    <td class="container">
        <button class="del">delete</button>
    </td>
</tr>
</table>

<br/><br/><br/><br/><br/>

<div class="container">
<button class="del">delete</button>
</div>​

CSS:

.container {
    position: relative;
    border: 1px solid red;
    height: 50px;
    width: 200px;
}

.del {
    position: absolute;
    top: 3px;
    right: 3px;
}​

为什么div里面的按钮会放在div的右上角，而td里面的按钮会放在表格外面？

如何解决？

查看事件演示:http://jsfiddle.net/Freewind/d6Tug/

Answer 1

我觉得跟td的显示风格有关，就是table-cell。如果将其设置为 display:block，它将正常工作。

只需将 display:block 添加到您的 .container 样式即可。

正如 freewind 指出的那样，如果您的浏览器支持 td，最好使用 inline-block，因为 td 通常显示在一行中。