Css 溢出不适用于 Firefox

Posted 2023-03-06

【中文标题】Css 溢出不适用于 Firefox

【英文标题】：Css overflow not working with Firefox

【发布时间】：2019-01-11 09:05:03

【问题描述】：

.css 文件

 #log
    -webkit-box-flex: 1;
    padding-top: 20px;
    overflow: scroll   ;
    height: 150px;
    color: #23568a;
    font-size: large;
    font-weight: bold;
    display: flex;
    flex-direction: column-reverse;

    

在 html 文件中， 我正在使用这样的日志

 <div id="receiveBox">
        <h2>Receive </h2>
        <div id="log"></div>
    </div>

socket.on('my_response', function(msg) 
                $('#log').append('<br>' + $('<div/>').text('Received #' + msg.count + ': ' + msg.data).html());
            );

使用 溢出：滚动； 我尝试将滚动添加到它将拆分的结果，但滚动条仅出现在 Safari 和 Chrome 中，而不出现在 Firebox 中。 我如何让它在 Firefox 中工作？？

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身最好是在堆栈片段中重现它所需的最短代码。尽管您已经提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website doesn't work can I just paste a link。

该链接只是一个可能的解决方案，应该或不应该实施。我已经发布了上面的问题

所有代码应该在问题中以演示问题。

我应该包含我的整个 .css 文件吗？

不，足以证明问题。需要最小演示。

【参考方案1】：

编辑（在前后评论后）：

要使其在添加新数据时自动向下滚动 div，请将这段代码添加到您的 js 中 socket.on 之后：

socket.on('my_response', function(msg) 
  $('#log').append('<br>' + $('<div/>').text('Received #' + msg.count + ': ' + msg.data).html());

  //New
  $("#log").animate(scrollTop: $("#log").prop("scrollHeight"), 'slow');
);

用硬编码的新数据添加更新了 jsfiddle（忽略 .html() 的东西，这只是示例）：

https://jsfiddle.net/82h4a5d9/24/

---

久木田，

我个人对您的这部分代码没有经验：

socket.on('my_response', function(msg) 
    $('#log').append('<br>' + $('<div/>').text('Received #' + msg.count + ': ' + msg.data).html());
);

但是在查看了 HTML 和 CSS，并在 Firefox 中使用一些虚拟数据进行了测试之后，看起来只是 flex-direction 导致了问题。不用那个试试？

所以只需注释掉这段：

/* flex-direction: column-reverse; */

https://jsfiddle.net/82h4a5d9/3/

【讨论】：

滚动条来了，谢谢。但我需要转到页面底部。现在，我必须向下滚动。有什么办法自动下降？

所以您希望它在数据加载时不断向下滚动（加载所有数据后在页面底部结束）？

是的，随着数据的输入而下降

您希望框的高度固定在内部并带有滚动条，还是只是让所有数据在整个页面的滚动条下显示在页面下方？编辑：我看到你有“高度：150px”，所以你可能想要固定高度？

不，我想将盒子固定高度。它不应该出现在整个页面上。