设置竖直滚动条样式兼容性

以下是设置竖直滚动条样式的兼容性方法：

1. 使用CSS属性`::-webkit-scrollbar`来自定义滚动条样式，该属性只适用于Webkit浏览器（如Chrome、Safari）。

/* 设置滚动条的宽度和高度 */
::-webkit-scrollbar {
  width: 10px;
  height: 100px;
}

/* 设置滚动条的背景颜色 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 设置滚动条的滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* 设置滚动条的边框颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

2. 使用CSS属性`scrollbar-width`和`scrollbar-color`来自定义滚动条样式，该属性适用于Firefox浏览器。

/* 设置滚动条的宽度和高度 */
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;

/* 设置滚动条的滑块颜色 */
scrollbar-color: #888 #f1f1f1;

3. 使用CSS属性`-ms-overflow-style`来自定义滚动条样式，该属性适用于IE浏览器。

/* 设置滚动条的样式 */
-ms-overflow-style: none;

请注意，以上方法只适用于特定的浏览器，无法兼容所有浏览器。为了实现跨浏览器的滚动条样式一致性，您可能需要使用JavaScript库或插件来实现。