IE11兼容性问题求助：原IE8正常代码失效，报InvalidCharacterError

嘿，从IE8升级到IE11踩兼容性坑太正常了——毕竟这俩版本的DOM规范实现差了好几个世代，哪怕是自研框架也容易在严格模式下翻船。结合你遇到的InvalidCharacterError和提供的makeScrollableTable代码片段，我帮你梳理下最可能的问题点和修复方案：

一、先搞懂这个错误为啥会出现 #

InvalidCharacterError在IE11里基本都是DOM操作违反了标准规范导致的，IE8对这类不规范操作会睁一只眼闭一只眼，但IE11严格遵循了W3C标准，常见触发场景包括：

• 用document.createElement()创建元素时，标签名包含空格、特殊字符，或者是不符合HTML规范的自定义标签（没加x-前缀的那种）
• 调用setAttribute()时，属性名用了空格、<、>这类非法字符
• 给innerHTML赋值时，混入了格式错误的HTML（比如未闭合的标签、属性值没加引号）

二、结合你的代码重点排查这几个环节 #

从你贴的代码片段来看，几个关键步骤是重灾区：

1. fixTableWidth(tbl)函数
   这个函数大概率是在给表格设置宽度或调整DOM属性，要检查：

   • 是不是用了setAttribute("width", "xxx%")这种写法？IE8能接受，但IE11对用setAttribute设置样式属性的兼容性很差，建议直接用tbl.style.width = "100%"或者tbl.style.width = ${计算值}px``
   • 有没有给表格设置了类似tbl.setAttribute("min-width", "500")这种不带单位的属性值？IE11会把这种当成非法值报错

2. container相关的容器操作
   代码里提到c = container.length; container[c...]，如果container是用来创建滚动容器的数组，要检查：

   • 创建容器元素时，标签名是不是合法？比如有没有写成scroll-wrapper（非标准标签，IE11不认可），改成标准的div加类名就好
   • 有没有给容器设置自定义属性时没加data-前缀？比如container[c].setAttribute("scroll-height", height)，IE11要求自定义属性必须用data-*格式，改成data-scroll-height就没问题

3. 滚动表格的拆分重组逻辑
   滚动表格通常会把表头、表体、表脚拆到不同容器里，这个过程容易出问题：

   • 是不是创建了类似document.createElement("table-footer")这种非标准标签？换成标准的tfoot或者用div包裹就好
   • 拼接innerHTML时，有没有把用户输入的内容直接插进去？如果内容里有<、>这类特殊字符，要先转义成<、>

三、快速定位问题的小技巧 #

• 用IE11开发者工具断点调试：在控制台报错的那一行打断点，看具体是哪个DOM操作触发的错误——是createElement还是setAttribute，直接精准定位
• 逐步注释代码排查：先注释掉fixTableWidth(tbl)，看是否还报错；再注释容器相关代码，一步步缩小问题范围
• 替换成兼容写法：把所有setAttribute设置样式的代码改成直接操作element.style；自定义属性全部换成data-*格式

四、常见问题的修复示例 #

如果是标签名非法的问题：

// 错误写法：非标准标签
var headerWrapper = document.createElement("table-header-wrapper");
// 正确写法：用标准div加类名
var headerWrapper = document.createElement("div");
headerWrapper.className = "table-header-wrapper";

如果是自定义属性的问题：

// 错误写法：无data前缀的自定义属性
tbl.setAttribute("scroll-height", height);
// 正确写法：用data-*属性
tbl.setAttribute("data-scroll-height", height);
// 或者用IE11支持的dataset语法
tbl.dataset.scrollHeight = height;

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