图片在 Safari 移动设备上填满整个 space

Question

所以我网站的导航栏在 Android 和 iOS phone、on Chrome/Android it looks fine but for some reason, 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 的兼容性问题？任何帮助将不胜感激。

根据 Seth 的输入更新

        <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

因为它是弹性项目的子项，弹性项目的默认对齐项目属性是拉伸的。

但是你的代码还有其他比较关心的问题，无效。汉堡包图像或站点徽标都不是合理的导航项。导航元素应包含指向网站页面的导航 link。

您不应将点击事件附加到图像。图像元素仅用于显示图像，没有别的。如果它去某处使用link，如果它做某事使用按钮元素。

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

我建议最好的方法是使用按钮元素（它已经内置了点击行为）来显示 link 列表（它带有 linky 行为内置）。

图片在 Safari 移动设备上填满整个 space

Image fills up the whole space on Safari mobile

css

safari

ios

reactjs

tailwind-css