必须用 flex 布局并为每个导航项单独包裹容器，禁用 margin/top 实现上浮，改用 transform 过渡，同时兼顾 touch 设备兼容与 flex 项防压缩。
直接用 nav 里套 li + a 做横向导航，再硬加卡片悬浮效果，大概率会出视觉错位、阴影被截断、hover 不触发等问题。核心矛盾在于：传统横向导航依赖 float 或 display: inline-block，而卡片悬浮需要容器具备独立的 border-radius、overflow: hidden 和可控的 transform 空间——这两套布局逻辑天然冲突。
必须用 flex 容器包裹每个导航项
别把 hover 效果直接写在 a 标签上，它没有自己的渲染边界。每个导航链接得包一层 div 或 span，作为卡片载体：
<nav class="nav"> <div class="nav-item"><a href="#home">首页</a></div> <div class="nav-item"><a href="#about">关于</a></div> <div class="nav-item"><a href="#contact">联系</a></div> </nav>
-
nav设display: flex，控制整体横向排列 - 每个
.nav-item是独立卡片容器，设border-radius: 6px、overflow: hidden、box-shadow -
a标签只负责内容和点击，不参与造型；它的display: block和内边距决定可点区域大小
hover 动效必须禁用 margin-top / top
用 margin-top: -4px 或 top: -4px 实现“上浮”，会触发重排（reflow），尤其在导航项较多或字体加载中时，hover 瞬间卡顿明显。正确做法是：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给
.nav-item加transform: translateY(0)+transition: transform 0.25s ease, box-shadow 0.25s ease -
.nav-item:hover改为transform: translateY(-3px)+ 更强的box-shadow - 避免同时改
height或padding，它们都会导致重排
移动端悬停失效？得加 touch 兼容层
iOS Safari 和部分安卓 WebView 中，:hover 在触摸设备上默认不触发（除非模拟鼠标事件）。如果希望手指轻点也能看到卡片反馈：
立即学习“前端免费学习笔记（深入）”；
- 给
.nav-item加cursor: pointer（提升可感知性） - 在 JS 中监听
touchstart，临时加一个.is-active类，样式同步复刻:hover规则 - 或者更简单：用
@media (hover: hover)区分支持 hover 的设备，对不支持的设备降级为常驻轻微阴影（不依赖交互）
最易忽略的是卡片间距与容器宽度的关系——flex 容器若没设 gap 或子项没设 flex-shrink: 0，缩放页面时卡片可能被压缩变形，导致圆角失效或阴影错位。务必确认 .nav-item 有 flex: 0 0 auto。
