为什么 Edge body 滚动条与 Firefox body 滚动条不同？

【问题标题】：Why is Edge body scrollbar different from Firefox body scrollbar?为什么 Edge body 滚动条与 Firefox body 滚动条不同？
【发布时间】：2015-11-18 16:01:39
【问题描述】：

我正在创建一个聊天列表，它在 Firefox 上运行良好，但在 Microsoft Edge 上却不行。

根<div class="chatting">的CSS：

.chatting {
    position: fixed;
    bottom: 5px;
    right: 5px;
    border: 1px solid #f00;
    width: 206px
}

Firefox 上的结果：

在 Microsoft Edge 上：

第二个快照的意思是：right: 5px; 还不够。为什么？这是我的问题还是 Edge 的问题？

【问题讨论】：

标签： html css firefox microsoft-edge

【解决方案1】：

默认情况下，Edge（和更新的 Internet Explorer）使用自动隐藏滚动条，它不占用布局空间。在 CSS 中添加 -ms-overflow-style: scrollbar 会使滚动条的行为类似于 Firefox（以及 Chrome 和其他浏览器）中的滚动条，这应该可以解决问题。

滚动条

指示元素在其内容溢出时显示经典的滚动条类型控件。与 -ms-autohiding-scrollbar 不同，将 -ms-overflow-style 属性设置为 scrollbar 的元素上的滚动条始终显示在屏幕上，并且在元素处于非活动状态时不会淡出。滚动条不会覆盖内容，因此会占用它们出现的元素边缘的额外布局空间。

参考：https://msdn.microsoft.com/en-us/library/windows/apps/hh441298.aspx

【讨论】：

我已将-ms-overflow-style: scrollbar 添加到<body>。它正在工作。非常感谢:)