td {position：relative;溢出到表边框

Question

http://jsfiddle.net/L83y3/

HTML

<table>
    <tr>
        <td>stuff</td>
        <td class="right">more stuff</td>
    </tr>
</table>

CSS

table
{
    border:10px solid green;
}
td
{
    padding:20px;
    background-color:gray;
}
.right
{
    position:relative;
}

为Chrome 13，Safari 5，IE7提供了坚实不间断的绿色边框 但是对于IE9，IE8，FF5，FF4，FF3.6

，结果如此

如何在整个过程中获得稳固的边框，但在正确的单元格中仍然有position:relative？

Answer 1

背景剪辑就是这样做的。 只需在"background-clip: padding-box;"上应用th即可。

根据文档：https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip。

“边框下方没有绘制背景（背景延伸到填充的外边缘）。”

Answer 2

应用z-index：-1;

jsfiddle：http://jsfiddle.net/thilakar/L83y3/1/

.right
{
    position:relative;
    z-index:-1
}

Answer 3

您无法可靠地更改表格单元格的position，某些浏览器（至少旧的Safari版本，最新版本似乎解决了这个问题）会强制表格单元格（和行）{{1} 1}}无论你说什么。

如果您需要在表格单元格中绝对定位某些内容，则需要在单元格中放置一个相对定位的position: static（或其他块元素），然后将其他所有内容放在其中：

<div>

然后调整CSS：

<table>
    <tr>
        <td>stuff</td>
        <td><div class="right">more stuff</div></td>
    </tr>
</table>

强制性的实例：http://jsfiddle.net/ambiguous/KUshG/

我怀疑这会解决您所看到的问题并解决您尚未看到的一些问题。

Answer 4

不要在桌子上使用位置。

只需将单元格内容包装到相对div中：

<table>
    <tr>
        <td>stuff</td>
        <td class="right">
            <div style="position:relative;">more stuff</div>
        </td>
    </tr>
</table>