我试图弄清楚如何可靠(因此,在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中使用它?