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

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;不够。为什么？那是我的问题还是 Edge 的问题？

Answer 1

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

scrollbar

Indicates the element displays a classic scrollbar-type control when its content overflows. Unlike -ms-autohiding-scrollbar, scrollbars on elements with the -ms-overflow-style property set to scrollbar always appear on the screen and do not fade out when the element is inactive. Scrollbars do not overlay content, and therefore take up extra layout space along the edges of the element where they appear.

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

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

Why is Edge body scrollbar different from Firefox body scrollbar?

html

css

firefox

microsoft-edge