兄弟，我太懂你这种折腾半天没结果的烦躁了——试过各种方案都压不住滚动条，还不敢动padding/margin怕丢了滚动功能，简直头大！针对你提到的Windows平台上的Firefox、Edge和IE，给你几个精准适配的方案，完全不用牺牲滚动体验：

分浏览器针对性实现 #

1. Chromium内核版Edge（79及以上版本） #

Chromium系浏览器支持通过::-webkit-scrollbar伪元素直接控制滚动条样式，把宽度/高度设为0就能隐藏，同时不影响滚动功能：

/* 针对Chromium版Edge的垂直+水平滚动条隐藏 */
.your-scrollable-element::-webkit-scrollbar {
  width: 0;  /* 垂直滚动条宽度设为0 */
  height: 0; /* 水平滚动条高度设为0 */
}

/* 可选：确保滚动轨道完全透明，避免残留痕迹 */
.your-scrollable-element::-webkit-scrollbar-track {
  background: transparent;
}

2. Firefox #

Firefox有专属的scrollbar-width属性，直接设为none就能隐藏滚动条，滚动功能不受影响：

/* 针对Firefox的滚动条隐藏 */
.your-scrollable-element {
  scrollbar-width: none;
}

3. IE 和 旧版Edge（非Chromium内核） #

这类浏览器用-ms-overflow-style: none属性就能实现隐藏滚动条且保留滚动：

/* 针对IE/旧版Edge的滚动条隐藏 */
.your-scrollable-element {
  -ms-overflow-style: none;
}

一站式兼容所有目标浏览器 #

把上面的规则组合起来，就能一次性适配Firefox、Edge（新旧版）和IE，替换掉.your-scrollable-element为你实际需要处理的元素选择器即可：

/* 兼容Windows三大浏览器的滚动条隐藏方案（保留滚动功能） */
.your-scrollable-element {
  /* 适配IE/旧Edge */
  -ms-overflow-style: none;
  /* 适配Firefox */
  scrollbar-width: none;
}

/* 适配Chromium版Edge */
.your-scrollable-element::-webkit-scrollbar {
  width: 0;
  height: 0;
}

小提示 #

如果还是没生效，先检查是不是有其他CSS规则的优先级更高覆盖了这些属性。可以尝试给属性加上!important临时排查（但优先调整选择器特异性，尽量少用!important），比如：

.your-scrollable-element {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

内容的提问来源于stack exchange，提问作者vin_Bin87