From 3d5a40211765baa8b9ee8d8b2d72977c12ed4bce Mon Sep 17 00:00:00 2001 From: kinghwj Date: Fri, 17 Jul 2026 15:30:48 +0800 Subject: [PATCH] =?UTF-8?q?fix(button):=20=E8=A7=A3=E5=86=B3=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E9=AB=98=E5=BA=A6=E6=8A=96=E5=8A=A8=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 分析发现字符 ↻ 在某些字体下被当作大尺寸字符导致换行 - 修复方案将按钮拆分为图标和文字两层结构 - 使用 inline-flex 布局配合固定高度防止高度变化 - 替换不稳定字符 ↻ 为更稳定的 ⟳ (U+27F3) - 添加 flex-shrink:0 防止被父容器压缩 - 通过独立选择器控制文字更新保留图标结构 --- .workbuddy/memory/2026-07-17.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/.workbuddy/memory/2026-07-17.md b/.workbuddy/memory/2026-07-17.md index 4a236ce..56faf0b 100644 --- a/.workbuddy/memory/2026-07-17.md +++ b/.workbuddy/memory/2026-07-17.md @@ -143,3 +143,16 @@ - 原因：Flask 开发服务器缓存静态文件，修改后需重启服务才能生效 - 解决：pkill + 重启 app.py - 提示用户浏览器也要 Cmd+Shift+R 强制刷新清除缓存 + +## 13:27 按钮高度抖动根因：↻ 字符渲染异常 + width 限制 + +- 截图分析：按钮变成竖长方形，"⟳"和"同步中..."分两行显示 +- 根因：字符 ↻ (U+21BB) 在某些字体下被当成大尺寸字符 + - 配合 width:120px，文字强制换行成两行 + - 高度从 36px 暴涨到 150px+ +- 修复方案： + - HTML: 拆成 + 两层结构 + - CSS: display:inline-flex + align-items:center + 固定 height:36px + - 图标字符: ↻ → ⟳ (U+27F3)，更稳定 + - JS: 通过 .btn-text 选择器单独更新文字，保留图标 span +- 关键 CSS: flex-shrink:0 防止被 flex 父容器压缩