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屋！