导航栏不会在Safari桌面上注册徽标图片的高度

Question

我正在使用ReactJS为我的一些朋友创建一个网站（还有Typescript，但是对于这个问题-我认为这两个都应该是无关紧要的）。它真的开始融合在一起，但是客户都拥有Mac笔记本电脑。这意味着当他们检查我的更新时，他们正在使用Safari。

如您所见，标头不够高，其徽标仅显示底部3/4？这是我的浏览器（Chrome）上的样子。

我的.App类设置为display: flex和flex-direction: column。在其中，我有一个Header组件，一个#main div和一个Footer组件。 #main设置为flex: 1。

Header组件是标准的Bootstrap导航栏。 （注意：布局现在略有不同-我出于调试目的做了此操作，但仍然会出现相同的问题。）

<nav
    className='navbar navbar-expand-lg navbar-light bg-info'
    id='header'
>
    <a className='navbar-brand mx-auto' href='/'>
        <Logo size={7} />
    </a>
    <button
        className='navbar-toggler ml-auto'
        type='button'
        data-toggle='collapse'
        data-target='#navbarCollapsingItems'
        aria-controls='navbarCollapsingItems'
        aria-expanded='false'
        aria-label='Toggle navigation'
    >
        <span className='navbar-toggler-icon'></span>
    </button>
    <div
        className='collapse navbar-collapse'
        id='navbarCollapsingItems'
    >
        <ul className='navbar-nav mx-auto'>
            {routes.map(
                (route) =>
                    !route.hidden && (
                        <li className='nav-item' key={route.title}>
                            <NavLink
                                exact
                                to={route.path}
                                className='nav-link text-light text-center'
                                activeClassName='active'
                            >
                                {route.title + ' '}
                                {history.location.pathname ===
                                    route.path && (
                                    <span className='sr-only'>
                                        (current)
                                    </span>
                                )}
                            </NavLink>
                        </li>
                    )
            )}
        </ul>
    </div>
</nav>

我尝试了很多事情，包括在`#header中添加height: 10rem或min-height: 10rem。这在我的浏览器上进行了更改，但未对其进行更改。在移动设备上，引导程序也无法展开导航栏。

我还听说Safari曾经遇到a元素正确显示图像的问题。我认为引导程序可以解决这个问题，但是我仍然尝试通过首先将d-block类添加到我的navbar-brand元素中来提供帮助。那没有用，所以我也尝试直接在SCSS中添加它：

#header {
    height: 8rem;
    .navbar-brand {
        display: block;
    }
}

也无济于事。

今天，我与客户打了电话，就如何打开Safari Web检查器向他们进行了交谈，并通过他们进行了替代性活动。

我们设法更改了主体的背景颜色以测试检查器是否正常工作，但是无论对导航栏元素执行什么操作，都无法更改其高度。

以下是检查导航栏元素时其检查器的图像：

所以，我真的没什么主意了。当ReactJS甚至无法在Windows的Safari上运行时，调试它也非常困难！

我希望有人能帮助我。

请先谢谢您！

---