Firefox CSS Hacks 项目中的地址栏与标签页样式优化方案

Firefox CSS Hacks 项目为 Firefox 浏览器提供了丰富的界面自定义方案。近期在 Firefox 133 版本中，用户报告了两个关键样式问题，经过社区协作已找到解决方案。

地址栏居中显示问题

原 compact_urlbar_megabar.css 样式在 Firefox 133 中会导致地址栏异常居中，表现为：

• 地址栏位置下移 500-600 像素
• 宽度扩展到 100% 屏幕宽度
• 聚焦时扩展效果失效

解决方案是修改 breakout 状态下的样式规则，替换为更精确的定位控制：

#urlbar[breakout][breakout-extend] {
    margin-left: 0 !important;
    width: var(--urlbar-width) !important;
    margin-top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
}

这个修改确保了地址栏：

1. 保持合理的宽度
2. 垂直居中定位准确
3. 不会过度扩展

标签页分隔线问题

在深色系统主题下，non_floating_sharp_tabs.css 会出现标签页底部边框残留的问题。这是由于：

1. 主题系统对边框颜色的特殊处理
2. 原有样式覆盖不完全

最终解决方案通过更全面的边框控制实现：

.tab-background {
    border-bottom: none !important;
}

这个修改确保了：

• 所有主题下都移除底部边框
• 保持标签页的"非浮动"视觉效果
• 不影响其他边框样式的正常显示

技术要点解析

1. CSS 变量应用：使用 var(--urlbar-width) 等变量确保样式适应不同配置
2. calc() 计算：精确计算垂直居中位置
3. 选择器特异性：[breakout][breakout-extend] 双属性选择器提高优先级
4. !important 使用：确保覆盖浏览器默认样式

这些修改已合并到项目主分支，用户更新后即可获得修复后的效果。对于高级用户，也可以手动应用这些修改到现有配置中。