Safari和Chrome CSS表行定位z-index问题(适用于Firefox)
And*_*rew 5 css safari firefox google-chrome z-index
我有一个问题似乎只影响Safari和Chrome(又名WebKit).我有一个覆盖整个屏幕的覆盖图,以及两个我希望显示在覆盖图顶部的表格行.页面上的其他所有内容都应显示在叠加层下方.
问题是Safari只在顶部显示一个表行.Firefox正确显示两者.我似乎无法在Safari中找到此问题的根本原因,但我知道我不是唯一一个拥有"在Firefox中运行的Safari定位问题"的人.
我应该怎么做才能在Firefox和Safari/Chrome中使用它？
<body>
<style>
.ui-widget-overlay {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
}
</style>
<table>
<tr style="position:relative; z-index:1000;">
<td>Displays on top in Firefox only</td>
</tr>
<tr>
<td>
<div style="position:relative; z-index:1000;">
Displays on top in both Safari and Firefox
</div>
<span class="ui-widget-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>
</body>
更新:显然上面的代码示例显示正确.但是,这只是一个样本.这不是实际的代码.HTML是相同的,但我使用JavaScript动态应用样式.
也许问题在于jQuery？我正在使用此行将定位添加到第一个表行:
$(firstTableRow).css('position', 'relative').css('z-index', '1000');
在Firefox中(使用Firebug)我可以看到正在应用样式,但是在Safari中(使用Web Inspector)它表示该表行的"计算样式"静态定位,其z-index为auto,即使"style attribute"样式表示位置是相对的,z-index是1000.
根据CSS 2.1规范:
'position:relative'对table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell和table-caption元素的影响未定义.
我假设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="ui-widget-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>
| 归档时间： |
|
| 查看次数： |
10730 次 |
| 最近记录： |