Html td{position:relative；}溢出到表边框中

HTML

为Chrome 13、Safari 5和IE7提供了坚实的绿色边框 但结果是IE9，IE8，FF5，FF4，FF3.6

如何获得一个完整的实体边框，但在右侧单元格中仍然有

位置：relative

？

应用z-index:-1

jsfiddle：

---

您无法可靠地更改表格单元格的

位置

，某些浏览器（至少较旧的Safari版本，最新的版本似乎已经解决了此问题）会强制表格单元格（和行）处于

位置：静态

，不管您怎么说

如果需要在表格单元格内绝对定位某些内容，则需要在单元格内放置相对定位的

（或其他块元素），然后将其他所有内容放置在该单元格内：

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

还有一个活生生的例子：

---

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

不要在表格单元格上使用位置

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

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

东西
更多的东西

背景剪辑正好起到了作用。 只需在

th

上应用

“背景剪辑：填充框；”

，它就可以工作了

根据文件：

---

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

好吧，看起来这对我的简化示例有效，但使整个

td

在我的实际项目中消失。表中给出[position:relative]和[z-index:2；]并为[z-index:1]给出一个[z-index:1]classA此解决方案的一个问题是，由于边框将位于功能区的上方，因此无法将功能区或类似区域放置在单元边框上方。但是，Yash解决方案没有这个问题。使用此解决方案，父元素上不能有背景色，否则内容将消失。这是可行的，但我希望避免在

td

中出现额外的

div

，到目前为止，这对我来说还行。你能想到那些还没有见过的场景吗？@qntmfred:Safari版本“current-1”就是其中之一，最后一个版本制作了所有的表格单元格

position:static

。我不确定其他浏览器。

当然是一个丑陋的最后手段，但除此之外，farIE 11最简单，仍然需要这个！这应该被标记为正确答案，因为TK先生的解决方案有缺陷。Yash，你太棒了：）不幸的是，这似乎触发了Chrome中的一个错误，它现在只绘制了部分背景，即使单元格上的填充为零。

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

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

.right {
    position:relative;
    width: 100%;
    height: 100%;
}

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