css3垂直滚动条

奇怪的滚动条

盒子撑开垂直滚调条后默认的样子真丑

小改一下

<style>
/* 全局样式 */
:root {
  --pc-width: 1278px;
}
.pc {
  width: 100vw;
  height: 100vh;
  background: #f2f3f5;
}
.pc main {
  width: var(--pc-width);
  box-sizing: border-box;
  height: 100vh;
  margin: 0 auto;
  padding-top: calc(65px + 10px);
  overflow-y: auto;
}

/* Webkit 浏览器 (Chrome, Safari, Edge) */
.pc main::-webkit-scrollbar {
  width: 1px; /* 滚动条宽度 */
}

.pc main::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景色 */
  border-radius: 10px; /* 轨道圆角 */
}

.pc main::-webkit-scrollbar-thumb {
  background: #d4d2d2; /* 滑块背景色 */
  border-radius: 10px; /* 滑块圆角 */
}

.pc main::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滑块悬停背景色 */
}

</style>

• ::-webkit-scrollbar：这个伪元素用于选择滚动条本身。可以设置滚动条的宽度（对于垂直滚动条）或高度（对于水平滚动条），以及滚动条的背景颜色。
• ::-webkit-scrollbar-track：这个伪元素用于选择滚动条的轨道（即滚动条背景部分）。可以设置轨道的颜色、边框等样式。
• ::-webkit-scrollbar-thumb：这个伪元素用于选择滚动条上的滑块（即用户可以拖动的部分）。可以设置滑块的颜色、边框、圆角等样式。滑块的样式通常与页面的整体设计相协调。
• ::-webkit-scrollbar-button：这个伪元素用于选择滚动条上的按钮（在某些滚动条设计中，滚动条的两端可能会有向上/向下或向左/向右的按钮）。可以自定义这些按钮的样式，虽然在现代网页设计中，这类按钮不太常见。
• ::-webkit-scrollbar-track-piece：这个伪元素用于选择滚动条轨道的一部分。通常不需要单独设置这个部分，除非需要实现一些特别的设计效果。
• ::-webkit-scrollbar-corner：这个伪元素用于选择滚动条交汇处的区域（当同时有水平和垂直滚动条时出现）。可以设置这个区域的背景颜色。
• ::-webkit-resizer：这个伪元素用于选择可用于调整元素大小的滚动条区域的拖动手柄。在大多数设计中，这个元素不需要特别的样式。

关于火狐浏览器

我看有文章说要给盒子在css中写上（比如上面的.pc main）

scrollbar-width: thin; /* 滚动条宽度 */ *

scrollbar-color: #888 #f1f1f1; / 滑块颜色和轨道颜色 */

但是加了这个之后我所有浏览器中的滚动条样式都变得奇怪了，去掉之后反而正常了。

这是不是可以认为火狐浏览器是支持了-webkit-scrollbar呢？或者说这在Linux上和win上表现不一样呢？

传送门@::-webkit-scrollbar - CSS：层叠样式表 | MDN