tab切换时未激活项display:none导致组件尺寸失真，须在afterchange回调中对可见项调用table.resize()或form.render()；css应精准作用于.layui-table-body而非全局；height:'full-xx'需动态计算并配合父容器height:100%；iframe内需重置字体及独立引入layui样式。
tab内容区域被 display: none 导致渲染异常
tab 切换时，未激活的 .layui-tabs-item 默认设为 display: none，此时内部组件（如 table、form）无法获取真实尺寸，初始化计算全按 0 处理，切回来就变形。这不是 css 覆盖问题，而是 dom 不可见导致的底层尺寸失真。
必须在 Tab 激活后、DOM 可见时再触发重绘：
- 监听
tabs.on('afterChange(filter)', callback)，而非tabChange（后者触发太早） - 确保回调中操作的是已添加
layui-show类的.layui-tabs-item - 对表格调用
table.resize('tableId')，对表单调用form.render('select')等对应方法
自定义 CSS 误伤 .layui-tabs-item 内部结构
常见错误是写了全局规则，比如 .layui-table td { padding: 5px; }，结果把 .layui-table-fixed 里的单元格也一并改了——固定列依赖精确的 box-sizing: border-box 和默认内边距，一动就错位。
安全写法只针对主表体：
- 用更具体的选择器：
.layui-table-body .layui-table td，避开固定列容器 - 固定列专用修复加这一条：
.layui-table-fixed .layui-table-body td { box-sizing: border-box; } - 避免用
!important覆盖white-space或overflow，Layui 单元格靠white-space: nowrap控制截断
height: 'full-xx' 配合 Tab 时高度计算为 0
height: 'full-100' 这类配置依赖父容器实际高度，但 Tab 切换瞬间，父级可能还没完成布局，导致表格高度算成 0，滚动失效、固定列飘走。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
解决办法不是硬写 px，而是动态算：
- 用 JS 获取真实可用高度：
document.documentElement.clientHeight - 200 - 在
afterChange回调里重新设置：table.resize('tableId', { height: newHeight }) - 如果用了 flex 布局，确保 Tab 内容区父容器有
height: 100%，否则clientHeight取不到值
iframe 嵌入 Tab 后样式隔离失效
用 iframe 加载 Tab 页面时，父页 CSS 不会穿透，但父页的字体大小、rem 基准、甚至某些全局变量（如 --layui-bg-color）可能丢失，导致表格宽度崩塌、边框断开。
关键动作必须做：
- iframe 内不依赖父页样式，所有表格相关 CSS 内联或单独引入
- 显式重置根字号：
html { font-size: 16px; }（避免 rem 计算偏移） - 初始化表格前等
window.onload，不是$(document).ready()，确保样式表加载完毕 - 父页若用
scoped或 CSS-in-JS，需额外导出.layui-table相关规则到 iframe
真正卡住人的不是样式写错，是以为“改个 CSS 就行”，结果没意识到 Layui 的渲染强依赖容器可见性与尺寸上下文。只要 Tab 内容还没真正 show 出来，任何 resize、render 都是空转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
