位置：相對隱藏Internet Explorer中的邊框

Question

我有一個表格，其中第一行是位置：相對。在IE 9中添加位置屬性隱藏了單元格之間的邊界。 （這在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

​​

我怎麼邊境露面，但保留的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

試試這可能有助於

<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

Answer 2

如果只對CSS3支持的瀏覽器，CSS3屬性背景夾可以幫助：這個

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

詳細物業：https://developer.mozilla.org/en-US/docs/CSS/background-clip