Javascript 表格行覆盖的可靠方法？

我试图弄清楚如何可靠地（在4种主要浏览器中）创建位于表行顶部的覆盖。到目前为止，我所做的似乎在Chrome和Firefox中有效，但在IE和Safari中无效

我有一个表，在最左边的列中有按钮，单击该按钮时，会触发一些逻辑来决定要在哪些行上放置覆盖。覆盖（到目前为止）是

元素，我在表行

元素前面插入DOM。标记的结果如下所示：

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

以下是我在Chrome34和Firefox29中得到的结果（很好）：

然而，这里是IE 11（覆盖层似乎位于行的后面）：

下面是Windows上的Safari（结果与IE 11相似，但覆盖层有点错位）：

---

问题：是否有更好的方法可以跨浏览器一致地执行此操作？或者我只是错过了一些小细节，让它在IE和Safari中发挥作用？

div不属于表中。为什么不使用一个可以轻松开关的特定类别使tr内的细胞变暗？例如：tr.overlay td{background:rgba（0,0,0,0.5）；}好吧，我倾向于同意，但是我想“覆盖”行，这样单元格中的任何内容都不能被点击，这样就可以看到不可选择的行被覆盖；（和xbrowser重复），光标：不允许；和指针事件：无；到上面提到的.overlay css类。这可以避免任何尺寸/缩放问题、绝对定位和其他过时的桌子设计难题。是的，我开始同意你的想法。“和xbrowser重复”是什么意思？跨浏览器在css3上重复webkit、moz和ie前缀。根据我的经验，使用js来操作表内/表上/表上部分大小的小部件就像上次十字军东征中的圣杯一样，不要被最终几乎无法触及的东西所吸引。

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