多条件筛选失效的根因是JS方法、DOM操作和CSS逻辑不兼容：IE8–IE11不支持Array.from、NodeList.forEach，textContent在IE8有空格截断缺陷，需用for循环、dataset、FormData及显式display值等兼容写法。
多条件筛选本身不直接引发兼容问题，真正踩坑的是你用的 JS 方法、DOM 操作方式和 CSS 表现逻辑——IE11 及更早版本不支持 Array.from、forEach 在 NodeList 上原生可用、textContent 在 IE8 里有空格截断缺陷，这些才是筛选失效的根因。
IE8–IE11 不支持 Array.from 和 NodeList.forEach
很多教程直接写 document.querySelectorAll('tr').forEach(...)，这在 IE8–IE10 会报错：对象不支持此属性或方法。IE11 虽支持 forEach，但只对数组有效，NodeList 仍是类数组对象。
- 改用传统
for循环：const rows = document.querySelectorAll('tr'); for (let i = 0; i - 若必须转数组，IE9+ 可用
Array.prototype.slice.call(rows)；IE8 需手动遍历构造数组 - 避免依赖
Array.from或扩展运算符[...rows]，它们在 IE 全系不可用
textContent 在 IE8 中会丢失首尾空格和换行
IE8 的 textContent 实际行为接近 innerText：自动 trim、合并空白、忽略 。比如单元格含 " 张三 "，IE8 读出来是 "张三"，而现代浏览器是 " 张三 "。这会导致精确匹配失败或模糊搜索漏项。
- 降级方案：优先用
innerText（IE 兼容），再 fallback 到textContent：cell.innerText || cell.textContent - 若需保留空格做清洗比对，改用
cell.innerHTML.replace(/]+>/g, '').replace(/\s+/g, ' ').trim()（兼容所有 IE） - 更可靠做法：后端返回数据时，把关键字段存进
data-value属性，前端直接读row.cells[0].dataset.value，绕过文本渲染差异
表单控件值获取在 IE 中的 checkbox 和 select[multiple] 差异
IE8–IE10 对 input[type=checkbox]:checked 和 select[multiple] 的 value 获取逻辑不一致：未选中时 input.value 返回空字符串而非 undefined，多选 select 的 value 只返回第一个选中项（不是数组）。
- 判断 checkbox 是否选中，别用
el.value，改用el.checked - 读取多选下拉框，必须遍历
select.options：Array.from(select.options).filter(opt => opt.selected).map(opt => opt.value)→ 但 IE8 不支持Array.from，所以得写循环 - 统一采集建议：用
new FormData(form)—— 它在 IE10+ 原生支持，IE9 可 polyfill；且天然跳过未选中的 checkbox、正确合并同名 name，比手撸安全得多
CSS 显隐控制在旧 IE 中的 display 值兼容写法
现代写法 tr.style.display = '' 在 IE8–IE9 会恢复为 inline（不是 table-row），导致表格结构崩坏。直接设 'table-row' 又可能被其他样式覆盖。
- 安全写法：显式设
'table-row'（显示）和'none'（隐藏），不要留空字符串 - 若表格用了
border-collapse: collapse，IE8 下display: none可能残留边框间隙，可加tr { font-size: 0; }防止空白字符撑高 - 避免用
visibility: hidden替代，它保留占位，多条件切换时滚动位置会跳动
最容易被忽略的是：所有这些 DOM 和样式操作，都建立在 DOCTYPE 顶格、无 BOM、不触发怪异模式的前提下。哪怕代码全对，只要 HTML 开头多一个空格，IE 就会把 querySelectorAll 当成不存在，display: table-row 当成无效声明——兼容性问题从来不是孤立的 API 问题，而是整条链路的底座是否牢固。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
