侧边栏项右侧边框在Firefox与Chrome中显示不一致的解决方法

针对侧边栏项右侧边框在Firefox和Chrome中显示不一致的问题，提供以下可行方案：

方案一：强制拉伸边框元素（推荐） #

问题根源在于Flex布局中，Firefox对h-full的解析与Chrome存在差异，给边框元素添加self-stretch类（对应CSS的align-self: stretch），可确保其在Firefox中也能拉伸至容器的完整高度。

修改边框div的className：

<div
    className={cn(
        "ml-auto opacity-0 border-2 border-sky-700 h-full self-stretch transition-all",
        isActive && "opacity-100"
    )}
/>

方案二：改用按钮自身边框替代额外div #

移除单独的边框div，直接给激活状态的按钮添加右侧边框，这种方式更简洁，且浏览器兼容性更好：

1. 修改按钮的className，添加激活状态的边框样式：

<button
    onClick={onClick}
    type="button"
    className={cn(
        "flex items-center gap-x-2 text-slate-500 text-sm font-[500] pl-6 pr-0 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 border-r-2 border-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>
</button>

方案三：统一容器高度计算 #

给按钮添加明确的高度控制，确保内部元素高度一致：

• 给按钮添加固定高度类（如h-16）或自适应高度类
• 同时给边框div保留h-full，让Firefox和Chrome基于明确的容器高度计算子元素高度

验证效果 #

修改后分别在Firefox和Chrome中测试侧边栏激活项的右侧边框，确认两者显示高度一致即可。

内容的提问来源于stack exchange，提问作者Farhad Hossain