fix(ui): Vocab 词条在 Windows 上的"大圈"——全局关 button user-agent appearance

用户反馈 Windows 上 Vocab 词汇表里每个词条被一圈大灰色边框/内阴影包住,
macOS 上不会。Vocab.tsx 自身零 OS 分支,根因在 global.css 的 button reset
缺 appearance:none:Chromium / WebView2 默认给 <button> 应用 OS-native 外观
(outset 边框 + 内阴影 + min-width),在 Vocab 词条这种由父级 span 的
padding 决定外形的嵌套 button 上整圈就露出来;macOS WKWebView 对
appearance:auto 处理较弱所以看不出来。

修法是 global.css button reset 加 appearance:none + -webkit-appearance:none,
一行修整仓。所有现有 button 都自己 inline 重写了背景/边框/圆角,关掉
user-agent appearance 不会改变它们的视觉。
This commit is contained in:
baiqing committed 2026-05-12 15:13:03 +08:00
1 parent a2a944ea31
commit 5bb1177cb9
1 file changed
+6
+6
View File
@@ -25,6 +25,12 @@ button {
background: transparent;
color: inherit;
padding: 0;
/* Windows Chromium / WebView2 默认给 <button> 应用 OS-native appearance(outset
边框 + 内阴影 + min-width),在 Vocab 词条这种依赖父级 padding 决定外形的 button
上会显示一圈灰色"大圈"。macOS WKWebView 对此处理较弱所以不显。统一关掉 user-agent
button styling,全仓所有 inline 重写背景边框的 button 在 Windows 上视觉与 macOS 对齐。 */
appearance: none;
-webkit-appearance: none;
}
@keyframes ol-select-pop {