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:
1 parent
a2a944ea31
commit
5bb1177cb9
1 file changed
+6
@@ -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 {
|
||||
|
||||
Reference in new issue
Block a user