0

Chrome と Safari で適切に動作する JS フィドルを作成しました。

http://jsfiddle.net/ZWvzB/

しかし、これは Firefox では同じようには機能しません。Firefox では、右揃えになります。

Firefox と Chrome の両方でこれを機能させる方法を知っている人はいますか? そして... また.. IE ?

これが誰かを失望させないことを願っていますが、クロムではなく.stickyFF でのみ動作させるために、クラスの幅を に設定しinheritます。その後、FF と Safari でのみ機能します。

4

2 に答える 2

3

これは私がそれを行う方法です：

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>

デモ

于 2012-08-13T14:52:01.333 に答える
1

これは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;

ここにFireFoxの基本的なセンタリングがあります。

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

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

}

于 2012-08-13T14:25:54.240 に答える