-
锚点跳转失效主因是id与href匹配细节或DOM状态异常:id须全局唯一且不以数字开头;href需为合法hash格式;目标元素须已渲染且可见;可用scrollIntoView()替代或监听hashchange手动滚动,并用scroll-margin-top解决吸顶遮挡。
-
抖动动画应使用translateX()实现左右位移,而非rotate();需配合@keyframes定义0%/25%/50%/75%/100%偏移序列,偏移量控制在±2px~±6px;必加animation-fill-mode:forwards(或用both),缓动选cubic-bezier(.36,.07,.19,.97);JS触发前需清空旧动画并强制重排;移动端慎用will-change,仅加translateZ(0)保障硬件加速。
-
file://协议下crossorigin="anonymous"会强制触发CORS检查但因无服务端响应头而失败,导致图片/脚本加载错误;本地开发应移除该属性,仅在HTTP(S)跨域场景(如CDN、WebGL、integrity校验)中保留。
-
navigator.vibrate震动反馈需用户手势直接触发且不可异步延迟,支持毫秒数或数组模式,需检测兼容性并降级处理,iOSSafari不支持。
-
PurgeCSS能删第三方库CSS而tree-shaking不能,因前者扫描源码中实际使用的类名并反向剔除未用选择器,后者仅分析JS模块import/export依赖,无法解析CSS文件内部规则。
-
必须用if/else而非switch的情况包括:数值范围判断(如score>=90)、关系运算(>、<、!=等)、布尔表达式、不同类型操作数比较、运行时计算值匹配——switch仅支持同一变量的离散等值匹配。
-
应优先使用<buttontype="reset">,它更现代、可嵌套内容且样式可控;<inputtype="reset">仅适用于极简场景;手动调用form.reset()易遗漏初始值逻辑和控件状态。
-
移动端:active伪类在真机不触发是因浏览器未激活,需加cursor:pointer、touchstart事件或role="button"+tabindex="0";必设touch-action:manipulation消除延迟,并配合transition与-webkit-tap-highlight-color:transparent。
-
JavaScript调用RESTAPI应使用fetch+async/await,手动检查response.ok或status,try/catch捕获异常;封装apiClient统一处理token、序列化、超时及错误;UI需响应加载、错误、空状态;URL应常量化管理。
-
writing-mode是切换文本流方向的布局机制而非视觉技巧;vertical-rl与vertical-lr区别在于竖排列序,需配合text-orientation、line-height、height等显式设置以避免错乱。
-
justify-content:space-evenly不生效的首要原因是父容器未设置display:flex;它将总空白均分给n+1个间隙,实现首尾与中间间隙完全等宽。
-
HTML5无需安装,其开发关键在于正确配置VSCode环境与浏览器调试选项。需用LiveServer解决跨域,禁用实验性设置,通过DevTools确认协议及存储行为,并在必要时安装Node.js支持构建与本地服务。
-
HTML5中边框实线必须用CSS的border-style:solid声明,不能依赖HTML旧属性;Chrome与Edge(Chromium内核)对此渲染一致,但需注意漏写solid、压缩丢失、父容器变换、覆盖样式及移动端兼容等实际影响因素。
-
纯CSS无法实现真正虚拟滚动,因其不能感知滚动位置、计算可视索引或动态更新渲染;核心逻辑必须由JS完成,CSS仅负责高效位移(如transform)与视觉优化。
-
:focus-visible更适合表单可访问性,因为它仅在键盘导航(如Tab)时显示焦点样式,避免鼠标点击时突兀的轮廓线;需用层叠规则安全降级,并注意浏览器支持与元素默认行为差异。