Safari无法在Mozilla上使用“位置粘滞"功能 [英] Position sticky doesn't work on mozilla neither in safari
问题描述
在Mozilla的Safari浏览器中,Position sticky都不起作用,但是在chrome中,它的工作原理非常完美.有谁可以帮助我..我知道我们可以通过许多其他方式使它成为"javaScript",但我不想在其中使用javaScript.
table thead th {位置:-webkit-sticky;位置:粘性;顶部:-1px;背景:#ccc;}.table-div {max-height:200px;溢出:自动;}.table-div表td {min-width:200px;}
< div class ="container">< div class ="row nopadding">< div class ="table-div table-sensitive">< table class ="table table-bordered">< thead>< head1</th>< head1</th>< head1</th>< head1</th></thead>< tbody>< tr>< td style ="height:50px;"></td>< td style ="height:50px;"></td>< td style ="height:50px;"></td>< td style ="height:50px;"></td></tr>< tr>< td style ="height:50px;"></td>< td style ="height:50px;"></td>< td style ="height:50px;"></td>< td style ="height:50px;"></td></tr>< tr>< td style ="height:50px;"></td>< td style ="height:50px;"></td>< td style ="height:50px;"></td>< td style ="height:50px;"></td></tr>< tr>< td style ="height:50px;"></td>< td style ="height:50px;"></td>< td style ="height:50px;"></td>< td style ="height:50px;"></td></tr></tbody></table></div></div></div>
位置:粘性
不是标准的,因此它可能有效,具体取决于浏览器和版本,甚至您需要在网络浏览器配置中设置一些标志.
您可以在此处查看此可用性:
http://caniuse.com/#feat=css-sticky >
如您所见,在已知问题中:
Chrome,Firefox和Safari 7&下方似乎不支持粘性表格标题.(另请参见Firefox错误)
Position sticky doesn't work on mozilla neither in safari browser, but in chrome it's working perfectly. Is anyone there who can help me.. I know it we can make it don't by many others way which is "javaScript" but I don't wanna use javaScript in it.
table thead th { position: -webkit-sticky; position: sticky; top: -1px; background: #ccc;}
.table-div {max-height: 200px; overflow: auto;}
.table-div table td {min-width: 200px;}
<div class="container">
<div class="row nopadding">
<div class="table-div table-responsive">
<table class="table table-bordered">
<thead>
<th>head1</th>
<th>head1</th>
<th>head1</th>
<th>head1</th>
</thead>
<tbody>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Position: sticky
is not a standard, so it may works, depending of the browser and the version, or even you need to set some flags in web browser config.
You can check this availavility here:
http://caniuse.com/#feat=css-sticky
As you can see, in known issues:
Chrome, Firefox and Safari 7 & below do not appear to support sticky table headers. (see also Firefox bug)
这篇关于Safari无法在Mozilla上使用“位置粘滞"功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!