表格行覆盖的可靠方法?

时间:2014-05-23 16:58:51

标签: javascript jquery html css

我试图弄清楚如何可靠(因此,在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中获得的结果(不错): Chrome/Firefox overlay result

然而,这是IE 11(叠加似乎在行后面): IE 11 overlay result

这是Windows上的Safari(类似于IE 11的结果,但覆盖有点偏离): enter image description here

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

0 个答案:

没有答案