-
PageLifecycleAPI无法捕捉用户关闭标签的异步前兆，唯一可靠时机是pagehide（persisted===false），须同步执行，推荐navigator.sendBeacon()或img打点；beforeunload、visibilitychange、freeze均不适合作为关闭信号，应采用关键动作即时上报+pagehide守底策略。
-
MarginCollapse是CSS规范规定的相邻块级元素垂直外边距取较大值而非相加的行为，导致父容器塌陷、间距异常等“突然变矮”现象；可通过加border、padding、overflow或display:flow-root阻止，Flex/Grid容器子元素间不发生该合并。
-
加了backface-visibility:hidden反而让元素消失，是因为该属性在安卓旧版浏览器中强制创建独立合成层，切断其与定位上下文的关联，导致absolute找不到包含块、fixed无法锚定视口而被跳过渲染。
-
Map在大规模数据查找中比Array.find()快，因其通过哈希定位实现O(1)查找，而Array.find()是O(n)线性遍历；数据量增大时耗时近似线性上涨，Map则稳定在0.003–0.005ms，且支持多样key类型、增删后性能稳定。
-
scroll-snap-stop:always仅Safari≥15.4在触控板/触摸屏滑动时真正生效；Chrome/Edge≤120、Firefox全系静默忽略；旧版浏览器直接丢弃该属性，需结合@supports和JS校准实现兼容。
-
Intl.Segmenter不能直接当分词器用，因其仅探测语言规则定义的边界位置，不判断语义合理性，如日语「東京スカイツリー」被切为单字而非专有名词整体，中文亦只按字切分，无法识别“编程”等语义词。
-
pointer-events:none在IE10及更早版本完全未实现，需用透明遮罩替代；遮罩须设position:absolute/fixed、z-index高于目标、background:transparent，并确保关闭按钮为其真实子元素且无障碍属性完备。
-
HTML列表嵌套必须将子列表（ul/ol）完整置于li标签内，否则浏览器会自动拆分为并列列表而非嵌套结构；错误写法如<ul><li>项</li><ol><li>子项</li></ol></ul>会被解析为两个独立列表。
-
background-blend-mode不生效需确认三件事：必须有至少两层背景（如图片+颜色或两张图片）；所有图层须写在同一background或background-image+background-color声明中；不支持伪元素单独设混合。
-
box-shadow多层叠加“糊成一团”是因渲染顺序错误：大模糊阴影应置于后层，锐利阴影放前层；spread负值可收紧边缘，blur与spread配比决定立体感；inset阴影需写在最后才能浮于表面；响应式需用CSS变量或clamp()动态调整。
-
accesskey会静默失效，因系统或浏览器优先截获组合键（如Alt+T触发新建标签页），且macOSSafari默认禁用、扩展程序可能劫持；仅可聚焦元素响应，需显式标注并避开常用键。
-
<tbody>是浏览器分块渲染表格的底层开关，加了它数据行能“边下边出”，提升慢网和SSR首屏速度；必须显式用多个<tbody>包裹数据行（每段50–100行为宜），且须与<thead>、<tfoot>共存并严格按此顺序书写，否则结构不合法、渲染异常或无障碍失效。
-
HTML5视频全屏时字幕不显示，因浏览器原生字幕控制器在全屏下被降级；应禁用track.mode='disabled'，手动监听cue变化并用div渲染，注意z-index、尺寸同步及Chrome98+需延时设mode='showing'。
-
details标签核心作用是语义化声明可折叠披露组件，必须以summary为首个子元素，否则Safari等浏览器点击失效；自定义图标应使用summary::before，JS控制须操作open属性而非display。
-
单独设flex-grow易失效，因其默认flex-basis:auto导致原始宽度不一致，剩余空间分配比例失真；flex:N等价于flex:N10%，以0%抹除内容宽度干扰，确保同一起跑线。
