Question

我在Chrome和Safari中正确地使用它的JS小提琴：

但这在Firefox中的工作方式不同。在Firefox中，它正确对齐。

任何人都知道如何让这个功能同时适用于Firefox和Chrome？而且......还有...... IE？

我希望这不会让任何人失望，但是为了让它专门用于FF和而不是 chrome，我所做的就是让.sticky类的宽度设置为{ {1}}。然后它只适用于FF和Safari。

Answer 1

我就是这样做的：

<强> CSS

.sticky
{
    position:fixed;
    top:0;
    left:31px;
    right:31px;
}
.sticky table
{
    border:1px solid blue;
    width:100%;
    border-spacing:0;
    border-collapse:collapse;
}
.sticky table tr
{
    background:blue;
    padding:5px;
    text-align:center;
}

<强> HTML

<div class="sticky">
    <table>
        <tbody>
            <tr><td>Crazy Fixed Div</td></tr>
        </tbody>
    </table>
</div>

<强> DEMO

Answer 2

这将涵盖FireFox

.sticky { 
text-align: -webkit-center;    //Chrome
text-align: -moz-center;   //FireFox
text-align: center;  
position: fixed;
top: 0;
left: 0;
z-index: 120;  
padding: 0 31px;
width: 100%;    
display: inline-table;
}

你也可以使用margin auto，因为这可能是首选方法

   margin: auto;

HERE是FireFox的基本中心;

.sticky-container {
 text-align: -moz-center;
 width: 100%;   
 position: fixed;   
}

  .sticky {
position: relative;
width: 100px;
z-index: 120;

}

如何使固定的流体工作台以两侧空的空间为中心？

2 个答案: