td {位置：相对； } 溢出到表格边框答案

【问题标题】：td { position:relative; } overflows into the table bordertd {位置：相对； } 溢出到表格边框
【发布时间】：2011-10-24 15:59:01
【问题描述】：

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？

【问题讨论】：

标签： html css

【解决方案1】：

背景剪辑只是起到了作用。只需在th 上应用"background-clip: padding-box;" 即可。

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

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

【讨论】：

Only IE9+，但目前为止最简单的
IE 11 仍然需要这个！
这应该被标记为正确答案，因为TK先生的解决方案有缺陷。
Yash，你太棒了:)
不幸的是，这似乎触发了 Chrome 中的一个错误，即使单元格上的填充为零，它也只绘制部分背景。

【解决方案2】：

应用 z-index:-1;

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

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

【讨论】：

好吧，看起来这适用于我的简化示例，但使整个 td 在我的实际项目中消失了。
为表提供 [position:relative] 和 [z-index:2;] 并为 [.right] 类提供 [z-index:1]
这个解决方案的一个问题是你不能在单元格边框上放置丝带等，因为边框将在丝带上方。但是，Yash 解决方案没有遇到这个问题。
使用此解决方案，您不能在父元素上使用背景颜色，否则内容将消失。

【解决方案3】：

您无法可靠地更改表格单元格的position，某些浏览器（至少是旧的 Safari 版本，最新版本似乎已修复此问题）将强制表格单元格（和行）为 position: static 否不管你说什么。

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

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

然后调整 CSS：

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

以及强制性的现场示例：http://jsfiddle.net/ambiguous/KUshG/

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

【讨论】：

这行得通，但我希望避免在td 中出现额外的div，到目前为止这对我来说还不错。你能想到任何尚未见过的场景吗？
@qntmfred：Safari 版本“当前 - 1”将是一个，最后一个版本使所有表格单元格 position: static。我不确定其他浏览器。 <div> 无疑是一个丑陋的最后手段。

【解决方案4】：

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

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

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

【讨论】：