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？

回答

相關問題