pozycja: względna ukrywa obramowanie w przeglądarce Internet Explorer

Question

Mam tabelę, w której w górnym wierszu znajduje się pozycja: względna. W IE 9 dodanie atrybutu position powoduje ukrycie granicy między komórkami. (Tak się nie dzieje w Chrome).

Moje pytanie jest podobne do this one,, ale nie mogę ustawić wskaźnika Z górnego wiersza poniżej innych wierszy, ponieważ będzie to stały nagłówek, który musi mieć wyższy indeks Z.

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; 
     } 

Jak uzyskać granicę, aby pokazać się, ale należy z-index większy niż innych komórek?

Edytuj: Oto kod jquery, który wyjaśnia, dlaczego pozycja nagłówka jest względna.
1. Pozwala na przewijanie nagłówka w poziomie i w pionie.
2. Nagłówek pozostaje na górze ekranu, gdy przewiniesz stronę ponad 153 piksele.

$(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

Spróbuj Może pomocna

<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

Jeśli tylko dla CSS3 obsługiwana przeglądarek, własności CSS3 background-clip może pomóc:

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

szczegółów na ten temat właściwość: https://developer.mozilla.org/en-US/docs/CSS/background-clip