CSS z-index问题：适用于Firefox，但不适用于Safari？

我想在叠加层上显示特定的表格行。它在Firefox中工作，但不是Safari。我不明白这是如何实现的，因为Firefox和Safari通常会让这些类型的东西变得相同。CSS z-index问题：适用于Firefox，但不适用于Safari？

<body> 

    <style> 
     .overlay { 
      position:absolute; 
      width:100%; 
      height:100%; 
      background:#000; 
      opacity: 0.5; 
     } 
    </style> 

    <table> 
     <tr style="position:relative; z-index:1000; background:#fff;"> 
      <td>show this one on top</td> 
     </tr> 
     <tr> 
      <td>Show these below</td> 
     </tr> 
     <tr> 
      <td>Show these below</td> 
     </tr> 
     <tr> 
      <td>Show these below</td> 
     </tr> 
    </table> 

    <div class="overlay"></div> 

</body>

这是什么导致Safari和Firefox之间的这种差异？

来源

2010-09-30 Andrew

按照CSS 2.1 specifications：

的影响：在表列的基团，表头的基团，表英尺的基团，表行，表列 - “位置相对”组，表列标题，表格标题和表格标题元素未定义。

我假设Firefox实现它的一种方式，并且WebKit以不同的方式实现它，两者都是正确的，因为它是未定义的。这里故事的寓意不是在表格元素上指定位置。

我能够得到它通过与包装div每个表格单元格的内容和定位div来工作。我还移动了我所针对的表格行内的覆盖图（不确定是否有必要）。

<table> 
    <tr> 
     <td> 
      <div style="position:relative; z-index:1000;"> 
       Displays on top in both Safari and Firefox 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div style="position:relative; z-index:1000;"> 
       Displays on top in both Safari and Firefox 
      </div> 
      <span class="overlay"></span> 
     </td> 
    </tr> 
    <tr> 
     <td>Displays below overlay</td> 
    </tr> 
    <tr> 
     <td>Displays below overlay</td> 
    </tr> 
    <tr> 
     <td>Displays below overlay</td> 
    </tr> 
</table>

来源

2010-10-04 23:00:36 Andrew

-1

Safari和Firefox使用不同的渲染引擎，这可以解释为什么他们在这种情况下表现不同。 Safari使用WebKit，而Firefox使用Gecko。

来源

2010-09-30 18:54:55 MattHughesATL

明显。问题在于Firefox以何种方式渲染它，以及我需要改变什么，以便Safari能够匹配它在Firefox中的外观？ – Andrew 2010-09-30 19:14:10

对不起，我误解了你的问题。我做了一些测试，但无法弄清楚如何让你的解决方案在Safari中运行。它看起来像一个td（或tr）不能显示比它在Safari中的父表更大的z-index。我现在唯一能想到的解决方案是将其分成两个不同的表格（具有相同的宽度）......一个在覆盖层之上有一个Z索引，另一个在其下面有一个Z索引。 – MattHughesATL 2010-10-01 13:35:26

CSS z-index问题：适用于Firefox，但不适用于Safari？

回答

相关问题