6

我在我的网页中有以下 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

检查你的身体 css 标签、元数据和任何可能影响该 div 的东西。也许还有另一个 css 规则覆盖了“位置”此外，例如，如果您在正文 css 中有 css3 标签或错误，transform: translate3d(0px, 0px, 0px);这可能会使 Firefox 中的固定位置中断。

于 2013-11-27T17:12:30.373 回答
1

filter在当前元素或任何父元素上将导致 Firefox 上的位置固定中断。删除它或找到其他不直接使用过滤器的方法

于 2019-07-19T09:05:49.050 回答
0

我认为你应该尝试对你的 css 做一些改变试试这个 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 回答
0

如果您的问题是过滤器（而不是转换）导致问题，那么这将起作用。

我在固定元素父级上设置了一个过滤器，但它随着窗口的宽度而变化。我注意到，当窗口宽度越过这些@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>

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

于 2015-09-03T18:06:01.313 回答
0

它在谷歌浏览器上运行良好，但在 Firefox 上，您需要像这样为固定 div 添加属性（上、下、左、右）

       top : 0;
于 2021-07-16T15:24:10.963 回答