根本原因是layer.open({type:2})加载的iframe内容CSS作用域未隔离，父页面全局样式穿透影响子页；应通过skin参数加前缀隔离、子页禁用继承类或统一Layui版本解决。
为什么弹出层里的子页面样式会冲突
根本原因不是子页面本身写错了，而是 layer.open({ type: 2 }) 加载的 iframe 内容，其 css 作用域仍受父页面全局样式影响。layui 默认不隔离 iframe 的样式上下文，父页的 .layui-form-item、.layui-btn 等规则会穿透进来，尤其当子页面也引入了 layui.css 或同类 ui 库时，选择器特异性相近就直接覆盖或错乱。
用 skin 参数隔离样式作用域
这是最轻量、最可控的解法——不改 HTML 结构，只靠 layer 自身机制做隔离：
- 在
layer.open()中显式传入skin: 'my-iframe-page'（值可自定义，不能含空格或特殊字符） - 在父页面 CSS 中，所有要作用于该 iframe 弹窗的样式，都加上前缀：
body.my-iframe-page .layui-layer-content、body.my-iframe-page .layui-btn - 确保子页面内部的样式不依赖外部 class 名（例如避免直接写
.layui-btn，改用内联或 scoped 类）
这样做的本质是让父页样式只对带 body.my-iframe-page 的 DOM 生效，而 iframe 内容在独立文档流中，不受此 body class 影响；同时你又能精准控制弹窗容器层的外观（如标题栏、边框），不影响子页内部渲染。
子页面里禁用父页样式污染的硬招
如果子页面必须完全自治（比如嵌入第三方页面或微前端模块），仅靠 skin 不够，得从 iframe 内部切断继承链：
- 子页面
中加入：<style>* { all: initial !important; }</style>（慎用，会重置所有继承属性） - 更稳妥的做法：子页面加载后，用 JS 移除可能被注入的全局 class：
document.body.classList.remove('layui-layout-left')等（需知道父页注入了哪些 class） - 若子页面也用 layui，建议统一版本，并在子页入口加
layui.config({ version: '2.9.10' })避免因版本差异导致的 class 名不一致
别踩 !important 堆砌这个坑
看到样式错乱就加 !important 是典型误操作。Layui 的 .layui-layer-content 默认 overflow: auto，有人为去滚动条加 overflow-x: hidden !important，结果子页面里一个 table 宽度超限却被截断——问题不在要不要隐藏滚动条，而在子页面是否设置了 table { width: max-content } 或用了 white-space: nowrap。
立即学习“前端免费学习笔记（深入）”；
真正要盯住的是：子页面根元素是否有明确宽度约束？是否用了 flex 布局但没设 min-width: 0 导致内容撑开？这些细节比强行覆盖父样式更关键。
复杂点在于，iframe 内外两个 document 的样式表是独立解析的，但渲染时的盒模型计算会受父窗口尺寸和缩放影响——IE11 下尤其明显。所以“样式冲突”表象之下，常混着布局计算偏差，不能只盯着 CSS 规则看。
