为什么Edge主体滚动条与Firefox主体滚动条不同？ [英] Why is Edge body scrollbar different from Firefox body scrollbar?

问题描述

根目录的CSS < p>< ; div class =chatting> ：

  .chatting {
 position：固定; 
 bottom：5px; 
 right：5px; 
 border：1px solid＃f00; 
 width：206px 
} 
  

strong>

和微软Edge：

< img src =https://i.stack.imgur.com/Ddm3m.pngalt =在这里输入图片描述>

第二快照意味着： right：5px; 是不够的。为什么？这是我的问题或边缘问题？

解决方案

默认情况下Edge（和更新的Internet Explorers）使用自动隐藏滚动条，占用布局空间。在你的CSS中添加 -ms-overflow-style：scrollbar 使得滚动条的行为与Firefox（以及Chrome和其他浏览器）中的滚动条一样，它应该解决这个问题。 p>

滚动条

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

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

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?

解决方案

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

这篇关于为什么Edge主体滚动条与Firefox主体滚动条不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！