AionClaw Web UI跨浏览器兼容问题源于CSS解析差异，需开启?debug=1调试模式，用@supports降级Flex/Grid布局，强制mark/details样式，同步系统暗色偏好，并统一字体渲染规则。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
当你在Chrome中调试完AionClaw的Web控制台界面，切到Firefox或Safari却发现按钮错位、文字重叠、深色模式失效时，问题不是代码写错了，而是浏览器对CSS解析和渲染的底层行为不一致——尤其在flex容器伸缩、滚动粘性定位、字体行高继承这些环节。
确认是否为AionClaw Web UI自身样式问题
打开AionClaw内置的Web控制台（默认地址为 http://localhost:8080），在地址栏末尾手动添加 ?debug=1，回车后观察右上角是否出现「DevTools Mode」标识。只有开启此模式，后续所有样式调试才生效；未开启时，UI会强制加载压缩后的生产样式表，所有自定义覆盖均被忽略。
按 F12 打开开发者工具 → 切换到 Elements 面板 → 点击左上角选择器图标 → 在页面任意按钮上单击，查看右侧 Styles 面板中 display、flex、margin 等属性是否被划掉（strikethrough）。若被划掉，说明该样式被更高优先级规则覆盖，需继续向上追溯；若未被划掉但渲染异常，则进入下一步排查。
修复Flex与Grid布局跨浏览器错乱
方法一：用 @supports 包裹现代布局并提供降级方案
在 AionClaw 的自定义 CSS 注入点（设置 → 外观设置 → 自定义CSS）中，将原 flex 布局代码改写为：
@supports (display: grid) { .task-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; } }
@supports not (display: grid) { .task-list { display: flex; flex-wrap: wrap; } .task-item { flex: 1 1 320px; margin: 0.5rem; } }
注意：Safari 14.1 及更早版本无法识别 repeat(auto-fit)，必须用 @supports not 显式降级，否则整个 grid 规则会被整条丢弃，导致容器塌陷为单列。
方法二：禁用 Safari 的 flex-shrink 异常收缩
若任务卡片在 Safari 中宽度被莫名压缩，直接在卡片类上加：.task-card { flex-shrink: 0; }。Safari 默认对 flex 项启用 shrink，而 Chrome/Firefox 更倾向保持内容宽度，不加这句会导致卡片文字溢出或图标截断。
统一深色模式在各浏览器中的表现
第一步：强制声明 标签样式
AionClaw 日志页常用 高亮关键词，但 Firefox 在深色系统下默认透明底色，Safari 则无背景。必须显式覆盖：mark { background-color: #4a5568; color: #e2e8f0; padding: 0.1em 0.3em; border-radius: 3px; }
第二步：为 补全基础显示规则
IE/Edge Legacy 不识别 的点击区域支持极弱。在自定义CSS中追加：
details, summary { display: block; } summary { cursor: pointer; outline: none; } details[open] > * { animation: fadeIn 0.2s ease-out; }
第三步：检测并适配系统暗色偏好
在 AionClaw 的「外观设置」中，确保「同步系统暗色偏好」已开启。若关闭，Windows/macOS 切换夜间模式后，AionClaw 仍维持亮色主题，造成视觉突变刺激——【这是唯一影响深色模式全局生效的关键开关】。
修复字体渲染与行高不一致
进入 设置 → 工具管理 → 显示增强，将「主界面字体大小」设为 14 号，「行高倍率」调至 1.45。小字号+密排是隐形眼疲劳源，14号适配27寸以下屏幕，1.45倍行高能明确区分段落边界，避免误读跳行。
若发现 Firefox 中中文字符发虚、Chrome 中英文混排基线偏移，在自定义CSS中加入：
* { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
这段代码不能加在 @media 查询内，必须作为顶层规则直接写入；否则 Safari 会忽略 -webkit-font-smoothing 声明，导致字体边缘锯齿明显。
