表格行覆盖的可靠方法？

Question

我试图弄清楚如何可靠（因此，在4个主流浏览器中）创建一个位于表格行顶部的叠加层。到目前为止，我所做的似乎都适用于Chrome和Firefox，但不适用于IE和Safari。

我有一个表格，在最左边的列中有按钮，单击时会触发一些逻辑，决定将叠加放在哪些行上。叠加层（到目前为止）是<div>元素，我在表格行<tr>元素之前插入DOM。标记最终看起来像这样：

<table>
  <tbody>
    <div class="overlay"></div>
    <tr>
      <td>Some text</td>
      <td>Some text</td>
    </tr>
  </tbody>
</table>

这是我用于叠加的CSS

div.overlay{
    background-color:#000000;
    background-color:rgba(0,0,0,0.7);
    height:28px;
    position:absolute;
    width:1136px;
    z-index:100;
    opacity: 0.7;
    filter: alpha(opacity=70);
    background:transparent;
    ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000, endColorstr=#B2000000);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000, endColorstr=#B2000000);
    zoom:1;
}

这是我在Chrome 34和Firefox 29中获得的结果（不错）：

然而，这是IE 11（叠加似乎在行后面）：

这是Windows上的Safari（类似于IE 11的结果，但覆盖有点偏离）：

问题：是否有更好的方法可以实现跨浏览器的一致性？或者我只是错过了一些小细节，以便在IE和Safari中使用它？