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

Question

我正在创建一个聊天列表，它在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;是不够的。为什么？这是我的问题还是边缘问题？

Answer 1

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

  

<强>滚动条

     

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

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