-
grid-column:span2生效的前提是父容器必须明确定义列轨道，如通过grid-template-columns设置；否则因无列宽基准，span无法计算而失效。
-
ins和del是语义化标签，分别表示插入和删除内容，必须成对闭合、正确嵌套并合理设置display样式；diff转HTML需逐行解析与转义；cite和datetime属性须规范使用以保障可访问性与语义准确性。
-
JavaScript通过canvas和ImageData可实现图像处理，需先加载图片、绘制到canvas、用getImageData获取像素数据，遍历修改后putImageData写回；注意跨域、性能及抗锯齿问题。
-
selectonchange事件不生效需检查：函数是否正确定义、是否在DOM加载后绑定、避免重复绑定；内联写法不可访问let变量；应优先用event.target.value获取最新值，联动时需同步清空选项并重置selectedIndex和disabled状态。
-
可直接用Blob实现前端生成并下载复合海报图像：先用Canvas绘制多图层（背景、图片、文字、二维码等），再转为PNG/JPEG数据封装成Blob，最后触发下载，全程无需后端。
-
MessageChannel需同源调用且端口必须显式启动：跨域时虽可创建但消息被静默丢弃；port.postMessage后须调用port.start()或设置onmessage；port1与port2须分发给双方；传输大数据应使用transfer列表实现零拷贝。
-
弹窗被导航、地图、页脚或抽屉遮住时，单纯调大 z-index 往往治标不治本。本文按完整工作流拆解层级现场、stacking context 定位、层级表设计、Portal 容器落地和回归验证。
-
navigator.clipboard.writeText()写入失败的常见原因包括：非安全上下文（非HTTPS且非localhost）、非用户手势触发、异步延迟调用、iframe缺失allow="clipboard-write"属性、浏览器权限静默拒绝、文档未聚焦或标签页非活跃，以及Safari等浏览器需额外权限声明或不支持。
-
步骤条跳转逻辑由父组件状态和业务规则控制，Emit仅传递点击意图；父组件校验后更新currentStep并加载数据，推荐用v-model封装以保持子组件纯粹。
-
浮动影响响应式布局主要因破坏文档流导致父容器塌陷、小屏换行错乱，且依赖固定宽度难以自适应；需额外清除浮动，维护成本高。相比之下，Flexbox与Grid支持自动伸缩、对齐和二维布局，更适配响应式需求，推荐优先使用。
-
vertical-align对inline-block有效但对flex容器无效，因后者由align-items控制垂直对齐；text-align仅作用于文本内容，justify-content才控制flexitem主轴分布；inline-flex宽度不足时justify-content失效，需显式设宽或改用flex。
-
WebComponents是浏览器原生API，含CustomElements、ShadowDOM和HTMLTemplates三部分；CustomElements需用短横线命名并继承HTMLElement；ShadowDOM提供样式封装，支持::part()和:host暴露接口；template内容需cloneNode使用，内联脚本不执行。
-
目前没有任何浏览器原生支持contrast这类CSS颜色函数，它仅存于早期草案中且从未落地；所谓“自动对比色”需开发者手动计算背景亮度并切换文字颜色，核心逻辑是判断背景明暗后选择白或黑文字。
-
importNode是Document对象方法，须通过document.importNode()调用，不可直接使用；报错多因上下文错误或IE兼容问题；深拷贝由第二参数控制，跨文档导入需严格匹配源节点所属文档。
-
用Map实现拦截器逻辑优先级，关键是以业务语义驱动顺序：通过key嵌入数字权重（如"auth:10"）或value绑定Pair<Priority,Interceptor>，配合排序后注册；支持路径路由、动态刷新与线程安全扩展。
