(tailwindcss) 我的侧边栏项目，右边框在不同浏览器中看起来不同

Question

侧边栏项目的右边框在不同浏览器中看起来不同。就我而言，Mozilla 和 Chrome。那么我该如何解决这个问题呢？

下面是来自 Mozilla 和 Chrome 的图像

"use client";
import { cn } from "@/lib/utils";
import { LucideIcon } from "lucide-react"
import { usePathname, useRouter } from "next/navigation";

interface SidebarItemProps {
    icon: LucideIcon;
    label: string;
    href: string;
}

export const SidebarItem = ({ icon: Icon, label, href }: SidebarItemProps) => {
    const pathname = usePathname()
    const router = useRouter()


    const isActive =
        (pathname === "/" && href === "/") ||
        pathname === href ||
        pathname?.startsWith(`${href}/`)

    const onClick = () => {
        router.push(href)
    }

    return (
        <button
            onClick={onClick}
            type="button"
            className={cn(
                "flex items-center gap-x-2 text-slate-500 text-sm font-[500] pl-6 transition-all hover:text-slate-600 hover:bg-slate-300/20", isActive && "text-sky-700 bg-sky-200/20 hover:bg-sky-200/20 hover:text-sky-700"
            )}
        >
            <div className="flex items-center gap-x-2 py-4">
                <Icon
                    size={22}
                    className={cn(
                        "text-slate-500",
                        isActive && "text-sky-700"
                    )}
                />
                {label}
            </div>
            {/* Right Active Border */}
            <div
                className={cn(
                    "ml-auto opacity-0 border-2 border-sky-700 h-full transition-all",
                    isActive && "opacity-100"
                )}
            />
        </button>
    )
}

我想在 Mozilla 和 Chrome 中看到相同的结果

Answer 1

我认为你应该从按钮类列表中删除“items-center”

它提供按钮 cssalign-items: center;覆盖默认显示：flex；对齐项目

默认情况下，align-items具有拉伸值，这意味着fled的项目将扩展到相似的高度