-
当表单存在多Tab结构且各Tab含required字段时，提交前需自动检测首个含未填写必填项的Tab并切换过去；本文提供健壮的DOM遍历逻辑、事件驱动验证方案及可维护的CSS样式控制。当表单存在多Tab结构且各Tab含`required`字段时，提交前需自动检测首个含未填写必填项的Tab并切换过去；本文提供健壮的DOM遍历逻辑、事件驱动验证方案及可维护的CSS样式控制。在多Tab表单中实现“提交时自动跳转
-
Flex布局实现按钮组对齐需设容器display:flex，用justify-content控制主轴分布（如center、flex-end等），推荐用gap代替margin，配合align-items可垂直居中。
-
无法靠统一色域配置文件解决Safari与Chrome颜色差异，因CSS不读取ICC/DisplayP3文件；根因是浏览器对未声明色彩空间的颜色（如#FF6B6B）按各自策略解释：Safari默认映射到DisplayP3，Chrome倾向保持sRGB；唯一可控方式是显式使用color(srgb10.41960.4196)并配fallback。
-
navigator.share仅支持Chromium内核浏览器（Chrome76+、Edge79+、SamsungInternet12.2+）和iOS/iPadOSSafari16.4+；Firefox、旧版Safari及桌面Safari不支持，且须HTTPS/localhost安全上下文。
-
可通过JavaScript检测CapsLock状态并提示用户。利用event.getModifierState('CapsLock')判断是否开启，并显示警告信息，结合CSS样式或JS自动转换输入为小写，提升密码等输入场景的用户体验。
-
iframe是HTML层面唯一真正的JS沙箱隔离方案，因其拥有独立window、document、history、location及事件循环，同域about:blank可安全注入脚本并仅通过postMessage通信。
-
基础选择器所有浏览器均支持，伪类和属性选择器在IE6-8中存在兼容性问题，建议通过降级方案、条件注释或Modernizr应对，现代开发可放心使用CSS3但需根据目标用户选择适配策略。
-
<p>修改$grid-columns后样式未生效，是因为变量必须在@import"bootstrap/scss/variables"之前声明；设为24后会生成col-1至col-24等完整类名，offset-<em>随之扩展，但order-</em>默认只到12，需手动覆盖$orders。</p>
-
outline不占盒模型空间而border占用，这是根本区别：border改变元素布局尺寸，outline仅视觉呈现且不影响周围元素。
-
margin折叠是指垂直相邻块级元素的margin-top与margin-bottom合并为较大值的现象，仅发生于普通文档流中；加border或padding可插入屏障阻止折叠；推荐用统一margin方向、BFC或gap替代。
-
要在HTML表格中添加颜色选择器，核心答案是使用HTML5原生<inputtype="color">或引入第三方库实现动态颜色应用。具体方案包括：1.使用原生<inputtype="color">，通过JavaScript监听change事件并设置单元格背景色；2.集成如Pickr、Coloris等JavaScript颜色选择器库，提供更丰富的功能和一致的跨浏览器体验；3.自定义简易调色板，通过预设颜色方块实现基础颜色应用。其价值在于提升用户
-
必须保留-webkit-overflow-scrolling:touch，因iOSSafari（含17.4）仍依赖它启用滚动惯性，且无现代替代方案；不加则拖完即停、无回弹、无法甩动。
-
CSS变量不能用于@media条件，因媒体查询解析早于变量求值；正确做法是将断点写死在@media中，用变量传递样式值。
-
<p>函数拦截器实现无侵入AOP日志系统，关键在于编译期重写而非运行时代理，依托C#12+的[InterceptsLocation]精准绑定源码坐标，通过静态拦截方法注入日志逻辑，并统一封装结构化输出与上下文信息。</p>
-
transition-behavior:allow-discrete是transition简写的第五个参数，用于在Chrome117+中启用display等离散属性的“50%翻转式”伪过渡，需显式声明属性、含display:none且不兼容Firefox/Safari。
