Layui表格在iframe中错位的根本原因是初始化时依赖window.getComputedStyle和document.body尺寸计算，而iframe内body可能无渲染尺寸或受父页CSS干扰；需在iframe load后、layui.table渲染完成并样式生效时调用table.resize()，并重置box-sizing为content-box。

为什么Layui表格在iframe里会错位

根本原因是layui的layui.table在初始化时依赖window.getcomputedstyle和document.body的尺寸计算列宽、滚动条偏移等，而iframe中若未显式设置width/height或overflow，其document.body可能无渲染尺寸，或父页面css重置（如box-sizing: border-box全局覆盖）干扰了layui内部测量逻辑。常见表现是表头与内容列不对齐、固定列偏移、滚动条消失或错位。

table.render()前必须手动触发重绘

Layui不会自动监听iframe加载完成或尺寸变化，需在iframe的load事件后主动调用table.resize()，且要确保DOM已就绪、样式已生效：

• 在iframe内JS中，等layui.use(['table'], callback)执行完再调用table.render()
• 渲染后立即加setTimeout(() => table.resize('your-table-id'), 10)，避免因样式未回流导致初始计算错误
• 若iframe宽高由JS动态设置，需在设置完尺寸后再调table.resize()

父页面要禁用影响iframe内盒模型的全局CSS

父页面若引入了重置CSS（如Normalize.css或自定义* { box-sizing: border-box; }），会穿透到iframe内容页，导致Layui计算列宽时把padding/border计入宽度，引发错位。解决方式：

• 在iframe页面的<head>中强制重置：

  body { box-sizing: content-box !important; }
  .layui-table-view { box-sizing: content-box !important; }

• 避免父页面对iframe使用width: 100%或flex: 1等弹性布局——改用固定像素宽高或min-width
• 检查父页面是否设置了iframe { display: block; }，缺失会导致底部默认留白，挤压表格高度

固定列+滚动时错位的硬解法

当表格含fixed: 'left'或'right'列，在iframe中易因滚动容器嵌套层级异常导致定位失效。此时不能只靠table.resize()：

• 确保iframe页面的<html>和<body>无margin/padding，且height: 100%链完整
• 在table.render()的done回调里，手动同步固定列transform值：

  done: function(res, curr, count) {
    const fixLeft = document.querySelector('.layui-table-fixed-l');
    if (fixLeft) fixLeft.style.transform = `translateX(${this.elem.scrollLeft}px)`;
  }

• 监听iframe内window的resize事件，而非父页面的——因为父页面缩放不影响iframe内实际渲染尺寸

Layui表格在iframe中的错位，本质是尺寸测量上下文断裂，不是样式问题而是生命周期问题；最常被忽略的是：table.resize()必须在iframe自身load完成且样式计算完毕后执行，而不是在父页面操作iframe.contentWindow时盲目调用。