firefox和chome的不同样式 解决办法

.tab-scroll::-webkit-scrollbar {
width: 13px;
height: 13px;
}
.tab-scroll::-webkit-scrollbar-track {
border: 1px solid #929599;
width: 13px;
height: 127px;
border-radius: 15px;
}
.tab-scroll::-webkit-scrollbar-thumb {
background: #51575d;
border-radius: 15px;
}
.tab-scroll::-webkit-scrollbar-corner {
background: #abacae;
}

第一点

<ul>的原点在两个浏览器的大小不一样，解决办法。将list样式隐藏，写伪类  li:before{content:"";10px; height:10px;border-radias:5px; background-color:#000000;}

     

第二点

ul 的list 数字 的大小也不一样，需要注意

 

 第三点

chome 可以写滚动条样式，firefox 很难达到和chome一样

chome 样式

.tab-scroll::-webkit-scrollbar {
width: 13px;
height: 13px;
}
.tab-scroll::-webkit-scrollbar-track {
border: 1px solid #929599;
width: 13px;
height: 127px;
border-radius: 15px;
}
.tab-scroll::-webkit-scrollbar-thumb {
background: #51575d;
border-radius: 15px;
}
.tab-scroll::-webkit-scrollbar-corner {
background: #abacae;
}

火狐

overflow-y: scroll;
scrollbar-color: transparent transparent;
scrollbar-track-color: transparent;
-ms-scrollbar-track-color: transparent;

可以实现火狐浏览器下滚动条的隐藏。

参考地址  https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox/54101063#54101063

 第四点