如何在IE（含Edge兼容模式）中为禁用的textarea启用滚动条

嘿，这个问题我之前做兼容项目时也踩过坑——IE（包括开启IE兼容模式的旧版Edge）确实会默认隐藏带disabled属性的textarea滚动条，不过有几个靠谱的CSS方案能搞定：

方案1：直接定义IE专属滚动条样式 #

IE支持::-ms-scrollbar系列伪元素，我们可以针对disabled状态的textarea强制设置滚动条的可见样式，覆盖默认的隐藏规则：

/* 针对disabled的textarea设置IE滚动条 */
textarea:disabled::-ms-scrollbar {
    width: 12px; /* 垂直滚动条宽度 */
    height: 12px; /* 水平滚动条高度 */
}
textarea:disabled::-ms-scrollbar-thumb {
    background-color: #ccc; /* 滚动条滑块的颜色 */
    border-radius: 6px; /* 滑块圆角，可选 */
}
textarea:disabled::-ms-scrollbar-track {
    background-color: #f1f1f1; /* 滚动条轨道的颜色 */
}
/* 给textarea设置固定高度，确保内容足够时能触发滚动条 */
textarea:disabled {
    height: 150px;
    overflow: auto;
}

这个方案直接作用于IE的滚动条控件，能强制让它在disabled状态下显示出来。

方案2：用readonly模拟disabled效果（兼容性拉满） #

如果上面的方案在某些极端IE版本里不生效，可以换个思路：用readonly属性代替disabled，再用CSS模拟disabled的视觉效果——readonly状态的textarea在IE里不会隐藏滚动条，用户体验和disabled几乎一致：

/* 模拟disabled的外观 */
textarea.readonly-disabled {
    background-color: #eeeeee; /* 灰背景 */
    color: #999999; /* 浅灰色文字 */
    cursor: not-allowed; /* 禁止鼠标样式 */
    border-color: #cccccc; /* 边框变灰 */
}

HTML代码示例：

<textarea readonly class="readonly-disabled">这里是你的长内容...</textarea>

小提醒：readonly的textarea会在表单提交时传递内容，而disabled不会。如果在意这点，可以在表单提交前用JS临时把它设为disabled，或者后端忽略该字段即可。

方案3：强制overflow属性（简单粗暴） #

有时候直接给disabled的textarea加overflow: scroll !important也能生效，记得配合固定高度：

textarea:disabled {
    overflow: scroll !important;
    height: 150px;
    /* 可选：防止用户意外聚焦 */
    pointer-events: none;
}

这个方案最简单，但可能在部分IE版本里优先级不够，建议和方案1结合使用更稳妥。

最后要注意：不管用哪个方案，都得确保textarea有足够的高度（固定高度或max-height），否则内容过少时本来就不会出现滚动条，和disabled状态无关哦。

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