Why is Edge body scrollbar different from Firefox body scrollbar?

问题

I'm creating a chatting list, it works fine on Firefox, but it's not on Microsoft Edge.

CSS of the root <div class="chatting">:

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

Result on Firefox:

and on Microsoft Edge:

The second snapshot means: right: 5px; is not enough. Why? That's my problem or Edge problem?

回答1:

By default Edge (and newer Internet Explorers) use an autohiding scrollbar, which doesn't occupy layout space. Adding -ms-overflow-style: scrollbar to your CSS makes the scrollbar behave like the scrollbar in Firefox (and Chrome and other browsers), which should fix the issue.

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.

Ref: https://msdn.microsoft.com/en-us/library/windows/apps/hh441298.aspx

来源：https://stackoverflow.com/questions/33773216/why-is-edge-body-scrollbar-different-from-firefox-body-scrollbar