-
Sass中hover伪类嵌套失效主因是编译后CSS选择器权重不足、父元素缺少交互属性或层叠上下文，且&仅为父选择器字面拼接占位符，非逻辑封装；需检查编译输出、避免非法嵌套、注意伪类组合顺序及移动端兼容性。
-
IE6–8不支持border-radius时可用PIE.htc，但需严格满足路径、display、hasLayout、overflow等条件，HTTPS下须确保协议一致及MIME正确，动态修改需手动detach/attach，现代项目应避免使用并优先采用渐进增强策略。
-
ArrayBuffer比普通字符串或数组更具优势，原因在于它提供了字节级别的访问和连续内存分配。首先，字符串以UTF-16编码存储，不适合处理无字符编码的原始二进制数据，频繁的编码/解码操作会引入错误和性能损耗；其次，普通数组存储任意JavaScript值，导致额外内存开销和低效访问，而ArrayBuffer通过TypedArray视图实现高效读写同质数据，通过DataView支持异质数据及字节序控制，适用于图像处理、音频合成等高性能场景。
-
使用模板引擎如Jinja2定义宏可实现HTML代码复用，通过在macros.html中定义input_field和button等宏，并在index.html中导入调用，提升开发效率与维护性，确保多页面组件一致性，避免重复代码。1.建立清晰目录结构，如templates/components/分类存放宏文件；2.遵循命名规范，使用小写加下划线；3.添加注释说明参数与用途；4.保持宏职责单一，避免过度复杂；5.将宏文件纳入版本控制，便于团队协作。主流工具还包括Handlebars、EJS、Twig及Vue/R
-
flex-basis是分配空间前的初始基准，非固定值；优先用0px而非0%，因0%在旧版Safari中可能回退为auto导致布局错乱，且需配合min-width:0解除隐式最小尺寸限制。
-
会错位。纯用<span>嵌数字默认按文本基线对齐，与徽章背景垂直中心不匹配，尤其小字号或混排时明显偏下；需用position:relative+transform微调，确保宽高偶像素、避免半像素模糊，并统一缩放line-height与padding。
-
时间轴布局可通过HTML与CSS结合实现，关键步骤包括：1.使用ul或ol搭建结构，每个时间节点包含日期和内容；2.通过伪元素创建时间线并定位节点；3.利用奇偶选择器设置交错样式；4.添加响应式规则适配不同设备。具体实现中，HTML负责结构组织，CSS用于样式设计与视觉效果优化，同时需注意间距、颜色对比及移动端适配问题。
-
fetch()不必须走网络请求，但绝大多数场景下会发起HTTP请求；它不支持直接读取file://协议文件，开发时需本地服务，例外是可fetchBlob或data:URL模拟响应。
-
CoreWebVitals由浏览器根据真实用户行为计算，HTML仅是影响因素之一；<linkrel="preload">可加速LCP关键资源加载，width/height和decoding="async"有助于防控CLS，而过度内联CSS反可能延迟FCP。
-
grid自动排列留空是因为跨越轨道的项不触发回填，后续项按源顺序和当前行剩余空间推进；启用rowdense或columndense可密集填充空位，但会破坏DOM与视觉顺序一致性。
-
type="email"不可信，因其仅按RFC5322极小子集校验，放行user@domain..com等无效格式，且存在兼容性问题；需JS补强+后端兜底三层验证。
-
纯CSS粒子仅支持静态或简单循环动画，因无逐帧计算能力，无法实现鼠标吸附、碰撞反弹等交互效果，且粒子数超150易致渲染瓶颈；canvas+requestAnimationFrame才是高密度、物理响应式粒子的正确方案。
-
Grid更适合主容器布局，因其二维可控性强、无需脱离文档流、响应式健壮；float易致塌陷、清除困难、维护成本高，且无法精准控制区域宽高与对齐。
-
最简单方法是设html{scroll-behavior:smooth;}，但Safari15.4前及部分安卓WebView不支持；JS需显式调用scrollIntoView({behavior:'smooth'})，注意目标元素存在性与渲染时机。
-
--scale变量配合calc()控制尺寸比transform:scale()更可靠，因它改变布局盒而非仅渲染层，避免点击区域错位、坐标系失准、字体糊化等问题。
