-
IE9及以下完全不支持animation和@keyframes，连解析都跳过；加-webkit-前缀也无法让老Safari正常运行动画，因其存在关键帧解析bug；Android4.0–4.2对opacity插值不准，需用visibility+transition替代；检测应通过动态插入测试元素并监听animationstart事件，而非依赖UA；降级首选transition+class切换。
-
counter-reset与counter-increment是CSS计数器机制的配对核心：前者声明并初始化计数器（如counter-reset:section;），后者在匹配元素上触发递增（如counter-increment:section;）；二者名称必须严格一致，且counter-reset必须作用于父容器才能使子元素的counter-increment有效。
-
“路由分片加载”指路由懒加载与数据按需加载的组合策略，专为万级数据报表设计：路由层懒加载隔离页面，数据层分批请求，渲染层用虚拟列表或增量渲染匹配节奏。
-
用checkbox控制气泡菜单更轻量，因无需JS监听、不触发重排、无JS依赖；核心是:checked伪类配合相邻/子元素选择器，且input必须位于label和菜单之前，禁用display:none改用opacity:0等隐藏。
-
<img>不加alt会导致浏览器渲染失败、屏幕阅读器无法播报、SEO权重下降；alt是语义必需项，纯装饰图应设为alt=""，链接中的图片需说明目标。
-
直接遍历Identifier重命名会出错，因未区分声明与引用；应基于作用域识别绑定，仅在声明位置生成新名，并通过scope.getBinding映射所有引用，同时保留全局API和导出变量。
-
在Flex布局中，仅对子元素设置justify-end无法使其相对于父容器右对齐；必须配合弹性分配（如flex:1）让其他兄弟元素“撑满”剩余空间，才能使目标元素自然靠右。在Flex布局中，仅对子元素设置`justify-end`无法使其相对于父容器右对齐；必须配合弹性分配（如`flex:1`）让其他兄弟元素“撑满”剩余空间，才能使目标元素自然靠右。你遇到的问题非常典型：在一个flexflex-row容器中，希望<p&
-
cloneNode(true)可高效复制含子节点和属性的DOM节点，适合高频复用结构一致的UI模板；推荐用<template>存放纯净模板，克隆后需手动填充数据、重绑事件，并注意表单状态、富文本及canvas等内容无法自动继承。
-
Firefox旧版本中fieldset的border-radius失效是因浏览器未实现该特性，需加overflow:hidden防legend溢出，或改用div+role="group"模拟语义。
-
white-space:nowrap无效常见因父容器未设overflow-x:auto或子元素为display:block；需父设nowrap、子用inline-block或flex，注意iOS滚动卡顿及inline-block间隙问题。
-
直接用vw写响应式会出问题，因vw基于视口宽度计算，不响应zoom、DPR及iOS横屏vh异常；硬算如16/375*100vw=4.266vw难读易错，且@media中无法用vw()作断点，须用固定px断点解耦。
-
应优先用<img>替代background-image实现全屏背景，因其支持srcset/sizes精准适配多DPR，避免CSS渲染模糊；纯色渐变用CSS，纹理用SVG内联，图标用<svg>元素。
