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版本,最新的版本似乎已修复此问题)将强制表格单元格(和行)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/

我怀疑这会解决你所看到的问题并消除你尚未看到的一些问题.