layui table 在 IE10/IE11 下表头错位、固定列失效、省略号不显示等问题，根本原因是其 2.x 版本默认依赖不被 IE 完整支持的 flex 布局和 position: sticky；解决需禁用 flex、改用 line/row 皮肤、伪固定列、严格满足省略号三条件，并注意重载后手动修复样式及清除 CSS 缓存。
layui table 在 IE10/IE11 下表头错位或宽度塌陷
根本原因是 layui 2.x 的 table.render() 默认启用 css3 弹性布局（display: flex），而 ie10/11 对 flex 的支持不完整，尤其在嵌套表格、动态列宽计算时容易触发渲染异常。
实操建议直接禁用 flex 布局回退到传统 float 方案：
- 初始化表格时显式设置
skin: 'line'或skin: 'row'（避免默认skin: 'default'触发 flex） - 在
table.render()配置中添加done: function() { layui.$('.layui-table').removeClass('layui-table-flex'); } - 补一条全局样式（加在页面
<head>中）：html .layui-table-flex { display: table !important; }
IE 下固定列（fixed: 'left'）滚动错乱或消失
layui 的固定列依赖 position: sticky + flex 容器，IE 完全不支持 sticky，且 flex 子项的 position: absolute 行为在 IE 中不可靠。
必须放弃原生 fixed 列，改用「伪固定」方案：
- 把需要固定的列单独抽成一个
<table>，用position: absolute+top: 0+left: 0定位 - 监听主表格容器的
scroll事件，同步滚动 left 表格的scrollTop和scrollLeft - 关键：IE 下不要依赖
getBoundingClientRect()计算位置，改用offsetTop/offsetLeft+parentElement.scrollTop
表格内容换行、省略号（text-overflow: ellipsis）在 IE 中失效
IE 要求必须同时满足三个条件才触发省略号：white-space: nowrap + overflow: hidden + width（不能是 max-width 或百分比未明确计算值）。
layui 单元格默认用 layui-table-cell 类，IE 下需手动加固：
- 给列配置加
templet: function(d) { return '<div class="layui-table-ellipsis">' + d.xxx + '</div>'; } - 补充 CSS：
.layui-table-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } - 若列宽由 JS 动态计算（如
minWidth），确保最终渲染后单元格父元素有确定的width值（可用layui.$(td).outerWidth()检查）
使用 table.init() 或重载表格后样式丢失
IE 下 DOM 重绘比 Chrome 慢，table.init() 内部的 layui.$(...).html() 替换会清空已注入的兼容性样式，且 IE 不会自动重触发 CSS 重排。
每次重载必须手动触发样式修复：
- 调用
table.reload()后，立即执行layui.$('.layui-table').addClass('layui-table-line');（强制切回 line 皮肤） - 若用了自定义省略号或固定列逻辑，在
done回调里重新绑定 scroll 监听、重设width样式 - 避免在
done中操作大量 DOM；IE 下批量操作易卡顿，可加setTimeout(fn, 0)延迟执行
最麻烦的不是写兼容代码，而是 IE 会缓存旧版 layui 的 CSS 文件——哪怕你更新了 JS，CSS 还是老的。上线前务必检查 Network 面板里 layui.css 的响应内容是否匹配当前版本。
