图片填满了 Safari 手机上的整个空间

Question

所以我的网站导航栏在 Android 和 iOS 手机上的显示方式不同，on Chrome/Android it looks fine，但出于某种原因，the hamburger icon got stretched out and covers the whole page on Safari/iOS。

我使用 TailwindCSS，这是我的代码：

        <nav className="fixed sticky top-0 z-10 flex gap-2 p-2 bg-white cursor-pointer md:pl-4">
            <img
                onClick={toggleOpen}
                src="/hamburger-menu-red.png" className="w-10" alt="menu"
            />

            {props.showLogo && (
                <Link to="/">
                    <img
                        src="/cooken-logo.png" alt="cooken-logo" className="w-20 cursor-pointer" />
                </Link>
            )}
        </nav>

是因为我没有指定汉堡图标的高度，还是与 Safari 存在兼容性问题？任何帮助将不胜感激。

根据赛斯的意见更新

        <nav className="fixed sticky top-0 z-10 flex items-center h-12 gap-2 p-2 bg-white md:pl-4">
            <button
                onClick={toggleOpen}
            >
                <img
                    src="/hamburger-menu-red.png" className="w-10 h-8" alt="menu"
                />
            </button>

            {props.showLogo && (
                <Link to="/">
                    <img
                        src="/cooken-logo.png" alt="cooken-logo" className="w-16 h-8"
                    />
                </Link>
            )}
        </nav>

Answer 1

因为它是弹性项目的子项目，而弹性项目的默认 align-items 属性是拉伸。

但是，您的代码还有其他更值得关注的问题，它是无效的。汉堡包的图像或网站徽标都不是合理的导航项目。 nav 元素应包含指向网站页面的导航链接。

您不应将点击事件附加到图像。图像元素仅用于显示图像，仅此而已。如果它去某个地方使用一个链接，如果它做某事使用一个按钮元素。

您不需要将光标放在链接上，它们已经有了；图像不是因为它们不是交互式元素。

我建议最好的方法是使用按钮元素（已经内置点击行为）来显示链接列表（内置链接行为）。