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

Question

我正在创建一个聊天列表,它在Firefox上运行正常,但它不在Microsoft Edge上.

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

.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