-
本文详解为何移动端侧边栏无法自动转为水平布局，并提供完整CSS覆盖方案与响应式JavaScript控制逻辑，解决Bootstrap.flex-column的!important优先级冲突，实现在手机端底部显示图标在上、文字在下的横向导航栏。
-
color：设置线">
用插入水平分割线，不是HTML5中是一个**自闭合的换行级元素**，但语法上不写斜杠更稳妥。浏览器普遍支持，而在某些旧文档类型或严格XML解析环境下可能出问题。常见错误现象：–页面里看起来正常，但在XHTML模式下报解析错误–用JS动态插入时，innerHTML=''被某些浏览器自动修正为，导致意外嵌套始终用，不加结束标签，也不加斜杠如果项目强制XHTML兼容，改用前需确认DOCTYPE和解析器行为它默认是块级元素，前后自带换行，不需
-
父容器高度为0是因浮动元素脱离文档流，推荐用display:flow-root触发BFC修复；兼容IE时回退overflow:hidden；Flex/Grid布局下无需处理浮动塌陷。
-
点击劫持是一种UI层视觉欺骗攻击，攻击者用透明iframe叠在目标页面上，诱使用户点击伪装按钮，实则触发已登录状态下的敏感操作；防范核心是阻止页面被嵌入，推荐配置CSP的frame-ancestors指令而非过时的X-Frame-Options。
-
支持“局部同构刷新”的Web架构核心是渲染职责的精细切分：首屏关键内容（如标题、摘要、正文前300字）必须服务端直出以保障SEO；局部刷新组件需严格水合，props与key须100%一致，并通过__INITIAL_DATA__注入；客户端仅接管交互衍生数据，且须提供服务端fallback。
-
内存泄漏主因包括全局变量、闭包、事件监听未解绑等，通过ChromeDevTools分析堆快照与内存趋势，结合代码规范与资源清理可有效排查和预防。
-
油猴脚本注入UI需动态创建DOM并防护冲突：用固定id防重复、fixed定位+最大z-index确保置顶、内联CSS避免依赖；事件须用addEventListener或挂载到window；焦点问题需setTimeout延后focus；适配暗色模式应监听prefers-color-scheme。
-
浮动导致垂直导航条“断裂”的本质是父容器高度塌陷，clear:both应加在浮动元素的下一个兄弟块级元素（如main或footer）上，而非ul或li；真正修复需让父容器形成BFC，推荐display:flow-root。
-
JavaScriptWebComponent是浏览器原生API，由CustomElements、ShadowDOM和HTMLTemplates组成，用于创建可复用、封装良好的自定义元素；需继承HTMLElement、命名含短横线、用customElements.define()注册，并通过observedAttributes和attributeChangedCallback实现响应式更新，ShadowDOM提供样式隔离，template标签提升结构可维护性。
-
应使用严格相等字面量守卫（如===true）进行类型收窄，而非真值判断、in操作符或类型断言；自定义类型谓词适用于需复用或增强可读性的场景。
-
classList切换类最稳妥，避免className全量赋值；CSS变量配合setProperty实现主题切换；getComputedStyle读计算样式但有陷阱；动画优先用transform+CSS过渡而非JS改left/top。
-
递归函数写错会立即报RangeError:Maximumcallstacksizeexceeded，因V8引擎栈深限制约10000–15000层，常见于缺终止条件、条件不满足或未趋近基线；尾递归优化在主流JS引擎中基本不可用，应优先转为迭代或手动栈实现。
-
组件内存泄漏排查核心是“谁占着不放，就找谁”，重点在资源创建时明确生命周期终点，尤其定时器和全局事件监听；用ChromeMemory面板抓快照比对，查Retainers引用链；定时器须成对出现，全局事件监听要绑定即登记、卸载必移除；还需检查未取消请求、未销毁观察者、动态DOM节点及意外全局变量。
-
drop事件不触发是因为浏览器规范强制要求在dragover阶段调用event.preventDefault()，否则拒绝执行drop；dataTransfer仅可靠传递text/plain字符串且限同源；需显式设置draggable="true"才能触发dragstart。
-
应使用@mediaprint隔离打印样式，手动隐藏非内容元素，设置衬线字体、增大行高、重置页边距，并兼顾Chrome与Firefox兼容性，测试务必另存为PDF验证。
