Question

我的网页中有以下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中保持固定。

DOWNVOTERS请先评论。

Answer 1

检查你的身体css标签，metas以及任何可能影响该div的内容。也许有另一个css规则覆盖'位置' 此外，如果你在身体css中有css3标签或错误，例如，transform: translate3d(0px, 0px, 0px);可以在Firefox中进行固定的位置中断。

Answer 2

我认为你应该尝试对你进行一些改动试试这个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字体大小等。

Answer 3

#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);
}

Answer 4

如果您的问题是使用过滤器（而不是变换）导致问题，那么这将有效。

我在固定元素父级上设置了过滤器，但它随窗口宽度而变化。我注意到，当窗口宽度越过这些@media (max-width...)边界时，固定位置元素将重新定位到它应该处于的位置，而不管过滤器具有什么。

原始代码：

<style>
  .withFilter {
    filter: whatever;
  }
  #fixed {
    position: fixed;
    bottom: 0px;
    ....
  }
</style>
<body>
  <div id="a">
    <div id="fixed">
      at bottom
    </div>
  </div>
  <script>
    ... lots of stuff ...
      jQuery("#a").addClass('withFilter');
    ... lots of stuff ...
  </script>
</body>

工作代码：

.... same stuff ....
  <script>
    ... lots of stuff ...
      setTimeout(function() {
        jQuery("#a").addClass('withFilter');
      });
    ... lots of stuff ...
  </script>
</body>

只需添加足够的时间让固定位置保持不变，然后才应用过滤器/变换....

Answer 5

当前元素或任何父元素上的

filter会在Firefox上导致位置固定中断。删除它或找到另一种不直接使用过滤器的方法

Answer 6

您应该为固定 div 添加 Top 或 Bottom 属性像这样

       top : 0;

固定定位在Firefox中不起作用

6 个答案: