/* ============================================================ header-fix.css — 头部横向溢出修复 由 common/header.html 在 header.css 之后引入，全站每页生效。 问题：窄一点的分辨率下，右上角「登录 / 免费注册」被挤出视口， 而且页面不出现横向滚动条，用户完全够不到。 根因是一行 flex 里三个硬底线互相顶： header-bottom padding 3% header-logo-outer 150px header-nav 菜单总宽 + 左右各 60px 内边距（不可压缩） header-tools min-width:500px ← 写死的，内容其实只要 399px 菜单 10 项时，1440px 下这一行要 1649px，溢出 209px。 导航和工具区都不肯让步，被顶出去的就是排在最右边的登录/注册。 修复思路不是挑一个断点硬切——菜单项数后台随时会变， 任何写死的 px 断点都会在加菜单那天重新崩掉。 这里改成「谁该让步」的规则： · 工具区（登录/注册/购物车）永远不让，但也不再多占 101px； · 导航让步，压不下时自己横向滚动。 这样无论菜单是 5 项还是 20 项，右上角按钮都在。 ⚠ 控制台那条 `jQuery is not defined` 是噪音，不要跟着去"修"。 header.html 里 Header.js 确实排在 jQuery 之前，第一次执行必然报错； 但 common.js 在 ajax 拉回 nav.html 之后会**再动态插一遍 Header.js**， 那一次 jQuery 已就绪，模块完整跑完（window.BO 有值， #header 上挂得到 data('methods')）。汉堡菜单、已登录用户下拉、 窄屏登录浮层、导航滚动箭头——实测全部正常工作。 反过来，把 jQuery 提到前面才是灾难：实测那样改之后， 头部模块会在 #header 还是空的时候先跑一遍并抛 `Cannot read properties of undefined (reading 'top')`， 这个异常发生在 jQuery ready 回调链里，直接掐断了后面 common.js 的 ready 回调，导致 nav.html 根本没被拉回来，整个头部消失。 ============================================================ */ /* ---- 1. 工具区：去掉 101px 的空占位，但保住内容底线 ---------------- min-width:500px 是写死的，内容（搜索 18 + 间距 16 + 工具区 365）只要 399。 改成 auto 而不是 0：auto 在 flex 项上等于 min-content， 即「可以不再多占，但绝不会被压到把按钮裁掉」。这是关键， 写成 0 的话工具区会跟着一起被压缩，按钮反而被切。 */ .header-tools { min-width: auto; } /* ---- 2. 导航：允许被压缩，溢出交给厂商自带的滚动箭头 --------------- flex 项默认 min-width:auto（= min-content），这正是导航死顶着 不肯变窄、把工具区顶出视口的原因。置 0 后导航成为唯一的让步方。 这一条还顺带激活了厂商本来就写好、却一直没机会露面的滚动箭头： Header.js 里 .scroll-lbtn / .scroll-rbtn 的显隐是按 「header-nav-scroll 内部是否溢出」算的。改之前导航从不被压缩， 内部永远不溢出，溢出跑到页面级去了，所以箭头一次都没出现过； 改之后导航被压窄 → 内部真的溢出 → 箭头自动出现且点击可滚。 实测 1280px 注入 12 项：右箭头出现，点击后列表左移 115px，左箭头随之出现。 所以这里**不要**再加 overflow-x:auto —— 保留厂商的 overflow:hidden。 两套滚动机制并存的话，原生横向滑动会改 scrollLeft， 而箭头逻辑记的是自己那套偏移量，两边对不上，箭头方向会失准。 */ .header-nav { min-width: 0; } /* 菜单项不换行，否则压缩时会撑高头部 */ .header-nav .header-nav-list { white-space: nowrap; } /* ---- 3. 769–1023px：内页顶部留白补齐 ----------------------------- 厂商在 ≤1023px 把导航挪到第二行，头部由 75px 变 110px， 但 global.css 里 #content 的 padding-top 一直写死 75px， 于是这一档下所有内页正文被头部压掉 35px。厂商原有缺陷，顺手补。 首页不受影响：index.html 内联了 #content{padding-top:0}（hero 要顶到底）， 那段