前端技术文章
-
sticky定位失效时，首要排查父容器overflow属性；若祖先元素设overflow:hidden/auto/scroll，会截断粘性行为；需检查模态框、卡片等组件外层是否误加该样式，并可用clip-path替代。401 收藏 -
闭包不直接导致迭代器泄漏，而是因意外强引用迭代器及其底层数据源并长期存活所致；典型表现为堆中Generator/Iterator实例持续增长、Retainers显示Closure→window/emitter链路、内部持有大型数据引用。342 收藏 -
object-fit必须配合显式宽高才生效，否则无效；cover等比缩放至短边填满而裁长边，contain等比缩放至长边贴边而留白；需用object-position微调焦点，且注意IE不支持。190 收藏 -
HTML5跨平台协作问题源于BOM、换行符、路径分隔符、Git配置等元信息；VS需关闭UTF-8withBOM、设LF换行符，并配合.editorconfig与.gitattributes统一规范。497 收藏 -
@supports条件必须是完整“属性:值”对，值需合法且浏览器可识别；and/or/not需严格括号嵌套；selector()和font-tech()有版本限制；CSS.supports()需先检测存在性且参数顺序固定。173 收藏 -
Object.seal是构建前端业务字典“防篡改语义”的核心工具，它锁死对象结构（禁止增删键、重配置属性），但允许动态修改值，完美匹配字典“键名稳定、值可更新”的真实需求。409 收藏 -
CSS自定义属性是主题切换最轻量灵活的方式，通过:root定义变量、data-theme控制切换、localStorage持久化，并需确保回退值、作用域和层叠顺序正确。179 收藏 -
不能。role="none"无法移除table的强制语义，浏览器会忽略该属性，屏幕阅读器仍按表格解析；正确做法是改用div+CSS（如Grid/Flex）模拟布局，确保语义与结构分离。158 收藏 -
justify-content:space-between对末行无效是因为它仅按每行子项总宽与容器宽计算等分空隙，末行子项少导致空隙右堆；伪元素占位需满足：父容器flex+wrap、content:""、flex:00同子项宽。346 收藏 -
box-shadow被父容器裁切的典型表现是阴影仅部分显示，主因是父元素overflow非visible或未预留绘制空间；应优先检查并设overflow:visible，其次才考虑按公式padding≥2×max(blurRadius,spreadRadius)补位。348 收藏 -
navigator.clipboard.writeText()报“Permissiondenied”主要因三类原因：一是在页面加载时自动执行（如DOMContentLoaded中调用）；二是运行在HTTP非localhost环境；三是在iframe中调用但未配置sandbox和allow权限。459 收藏 -
HTML/CSS无法实现条件格式化，因CSS无法读取单元格内容或数值关系；必须用JavaScript遍历元素、判断数据并动态添加语义化class，再通过CSS统一控制样式。417 收藏 -
focusin是唯一可靠焦点入口，须在模态框绑定并用contains判断目标是否在框内；遮罩层需设tabindex="-1"和aria-hidden="true"；可聚焦元素须手动筛选，空时根元素tabindex="-1"后focus；Tab循环应重定向而非阻止；关闭后须安全回归触发源。334 收藏 -
使用float实现文字环绕图片；2.Flexbox实现图文并排对齐；3.Grid布局用于复杂结构；4.注意响应式与图片适配，优先选用Flex或Grid。164 收藏 -
highlight.js必须用<pre><code>结构、language-xxx类名、DOM就绪后调用highlightAll()，单独<code>不生效；需引入CSS，HTML特殊字符要转义或用text/plain脚本标签。128 收藏