6

サイドバーを左側に固定したい Web ページに次の HTML があります。Chrome では正常に動作しますが、Firfox はサイドバーを固定として表示しません。

<div id="sidebar">
    <!-- Logo -->
        <div >
            <h1>Heading</h1>
        </div>
            <!-- Nav -->
                <nav id="nav">
                    <ul>
                        <li><a href="#target1" >About</a></li>
                        <li><a href="#target2" >Works</a></li>
                        <li><a href="#target3" >Our Team</a></li>
                        <li><a href="#target4" >Contact</a></li>
                    
                    </ul>
                </nav>
                       
</div>

上記のコードの CSS は次のとおりです。

#sidebar
{
    position: fixed;
    top: 0;
    padding: 3em 1.35em 1em 1.15em;
    height: 100%;
    width: 12em; 
    background: #364050 ;
    box-shadow: inset -0.1em 0em 0.35em 0em rgba(0,0,0,0.15);
}

サイドバーが Firefox で固定されたままになるように、解決策を提案してください。

4

6 に答える 6

8

body css タグ、メタ、およびその div に影響を与える可能性のあるものを確認してください。その「位置」を上書きする別の css ルールがある可能性があります。また、たとえば css3 タグまたは css 本体にエラーがある場合、transform: translate3d(0px, 0px, 0px);Firefox で固定位置が壊れる可能性があります。

于 2013-11-27T17:12:30.373 に答える
0

このcssを試してみてください。

#sidebar
{
    position: fixed;
    top: 0;
    padding: 10px;
    bottom:0;
    left:0;
    width:200px; 
    background: #364050 ;
    box-shadow: inset -0.1em 0em 0.35em 0em rgba(0,0,0,0.15);
}

要素の寸法に em を使用することは好みません。px にする必要があります。em foe フォント サイズなどを使用できます。

于 2013-07-19T08:26:21.363 に答える
0 
#sidebar
{
    position: fixed;
    top: 0;
    left:0;
    padding: 3em 1.35em 1em 1.15em;
    height: 100%;
    width: 12em; 
    background: #364050 ;
    box-shadow: inset -0.1em 0em 0.35em 0em rgba(0,0,0,0.15);
}
于 2013-07-19T08:27:48.453 に答える