IE,Firefox,Chrome浏览器滚动条样式问题

Edge 暂时不支持浏览器定制化滚动条
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ScrollBar</title>
    <style type="text/css">
        /* ---- Chrome ----*/
        ::-webkit-scrollbar {
            width: 5px; /*滚动条粗细*/
            height: 12px
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
            background: #f2f6f3; /*滑道颜色*/
            border-radius: 7px; /*滑道的圆滑度*/
        }

        .scroll::-webkit-scrollbar-thumb {
            background: #d7d7d7; /*滑块颜色*/
            border-radius: 7px /*滑块圆滑度*/
        }

        .scroll::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8; /*滑块上浮*/
        }

        /*--- FirFox ---*/
        .scroll {
            scrollbar-width: thin;
            scrollbar-color: #d7d7d7 #f2f6f3;
        }
        /* --- IE ---*/
        body {
            scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/
            scrollbar-face-color: #333; /*立体滚动条的颜色*/
            scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/
            scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/
            scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/
            scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/
            scrollbar-track-color: #666; /*立体滚动条背景颜色*/
            scrollbar-base-color: #f8f8f8; /*滚动条的基本颜色*/
            Cursor: url(mouse.cur); /*自定义个性鼠标*/
        }
    </style>
</head>
<body>
<div class="scroll scroll-width-none">
    <p>none</p>
    <p>none</p>
    <p>none</p>
    <p>none</p>
    <p>none</p>
    <p>none</p>
</div>
</body>
</html>