-
IE9–IE11原生不识别HTML5语义标签，需用html5shiv通过document.createElement注册标签并配合CSS显式设display:block；IE8及以下会忽略标签仅保留文本；IE10+虽支持标签但Flex/Grid兼容性差，须加前缀或降级处理。
-
必须为父容器设置display:grid或inline-grid才能使align-items:center生效；它仅作用于直接子元素在交叉轴的对齐，且容器需有明确高度（如min-height:100vh）才能体现居中效果。
-
svg.js加载后SVG变量未定义，因新版本默认不挂载全局，需显式调用SVG()或用ESM导入；插入内联SVG须用SVG().addTo()，且目标容器必须已存在。
-
navigator.onLine不能判断弱网，必须用fetch探测：超时设1500ms、响应>800ms且连续两次失败才触发降级，通过aria-live安全插入“简化模式已启用”提示，禁用动画并确保文案纯静态。
-
主题颜色变量未生效的四大原因：变量定义位置错误、构建流程未读取新配置、CSS选择器权重不足、运行时主题切换未清除旧样式缓存，需逐一排查。
-
overscroll-behavior在iOS16.4前完全不支持，常见失效原因：写在html/body上被忽略、目标元素未设overflow、被fixed/transform等创建独立滚动上下文。
-
直接用<inputtype="tel">不足以满足手机验证码输入框的核心需求，因其无法实现自动聚焦、逐位分割、粘贴识别和精准光标控制，易导致粘贴只填首框、退格不跳位、iOS弹出全键盘、长度与视觉分离难统一等问题。
-
TextDecoder解码Uint8Array最轻量高效：一次性解码用response.arrayBuffer()转Uint8Array后decode；流式需复用实例并启用{stream:true}，末次调用decode()清缓冲。
-
white-space:nowrap是禁止文字换行的正确起点，但单独使用常失效：需配合width/max-width、display:block/inline-block、overflow:hidden及text-overflow:ellipsis才能实现完整截断效果，且在表格、contenteditable等场景需额外处理。
-
:focus直接生效但易污染全局、损害可访问性；失效主因是outline:none未替代、动态元素未就位、显隐属性阻断、权重覆盖、语义类型未区分；推荐用:focus-visible区分键盘/鼠标聚焦，并适配高对比模式。
-
用[href$=".pdf"]可精准匹配以.pdf结尾的URL并添加图标，因$=操作符只匹配属性值结尾，比*=更安全；需注意空格、协议不影响匹配，但IE8不支持。
-
max-width需配合width（如width:100%或width:fit-content）和display（如inline-block）才能避免塌陷或溢出；margin:0auto仅对有明确宽度的静态块级元素有效，Flex/绝对定位/行内元素需其他居中方式。
-
应将表单公共样式用@apply抽成.form-input等自定义类并置于@layercomponents中，避免被PurgeCSS误删；@apply仅支持Tailwind原生工具类，不可嵌套自定义类；需显式声明dark:变体以适配暗色模式。
-
<progress>标签需同时设置value和max属性才能正确显示进度，如<progressvalue="65"max="100">；仅设value会导致解析异常；兼容IE需降级为<div>模拟，动态更新须校验边界并用requestAnimationFrame实现平滑动画。
-
<p>关键在于监听dragover事件并调用event.preventDefault()；再通过event.clientY与target.getBoundingClientRect()计算offset=event.clientY-rect.top，若offset小于高度一半则为上方，否则为下方。</p>
