Firefox与Chromium系浏览器布局不一致问题求助

我正在开发一个校园项目网站，遇到跨浏览器布局兼容性问题：在Chromium系浏览器中调试正常的布局，到Firefox里完全错乱，具体有两个问题：

• a#logo-container元素无法根据子元素自动适配尺寸，手动设置正确的aspect-ratio可以临时修复这个问题
• 已经设置display: none的#user-menu元素仍然占用布局空间，导致页面内容整体左移

项目基于Svelte开发，我已经提取了可复现问题的最小代码示例。

附布局对比截图：

• Chromium系浏览器正常布局：
• Firefox中错乱布局：

想请教各位，这两个问题的根本原因是什么？有没有更合理的解决方案？

内容的提问来源于stack exchange，提问作者0324bence