位置：相对隐藏Internet Explorer中的边框

Question

我有一个表格，其中顶行是position：relative。在IE 9中，添加position属性会隐藏单元格之间的边界。 （这不会发生在Chrome中）。

我的问题类似于this one,，但我无法将顶行的z-index设置为低于其他行，因为它将是一个需要具有更高z-index的固定标头

HTML

<table border="1">
            <tr >
                <td class="locked">header 1</td>
                <td class="locked">header 2</td>
            </tr>
            <tr >
                <td>data 1a</td>
                <td>data 1b</td>
            </tr>
            <tr >
                <td>data 2a</td>
                <td>data 2b</td>
            </tr>
        </table>

CSS

.locked {
            position: relative;
            background-color: Yellow;
        }

如何显示边框，但保持z-index比其他单元格更大？

编辑： 这是jquery代码，解释了标题位置为何相对的原因 1.它允许标题水平和垂直滚动 2.当您向下滚动页面超过153像素时，标题会保留在屏幕顶部。

$(document).ready(function () {
    $(window).scroll(function(){ 
        var off = $(window).scrollTop();
        if (off < 153) {
            $(".frozenTop").css("top", 0);
        } else {
            $(".frozenTop").css("top", off - 153);
        }
    });
});

Answer 1

如果只支持CSS3支持的浏览器，CSS3属性 background-clip 可以提供帮助：

.locked {
    position: relative;
    background-color: Yellow;
    background-clip: padding-box;
}

有关此媒体资源的详细信息：https://developer.mozilla.org/en-US/docs/CSS/background-clip

Answer 2

试试这个可能有帮助的

<td class="locked"><div>header 1</div></td>
<td class="locked"><div>header 2</div></td>

table {
border-spacing: 0px;
}
.locked {
  position: relative;
  border:none;
}
.locked div{
  border:2px black solid;
  background-color: Yellow;
  margin:-2px;
}

jsFiddle