为什么我的边框在缩放时或在 iPad Air 等设备上会出现额外边框？

Question

我遇到的问题是，当我放大页面或在不同的屏幕格式（例如 iPad Air）上查看页面时，我的边框似乎有额外的边框或某种双边框效果。

这是我的组件的代码（React + Next.js + Tailwind CSS）：

  return (
    <div className="space-y-8 sm:space-y-12 py-6 sm:py-12 mb-12 lg:mb-0">
      <div className="flex flex-col items-end relative">
        <FadeText
          text="Catégories"
          direction="right"
          className="text-4xl md:text-6xl lg:text-8xl font-extrabold tracking-tight"
        />
        <Link
          href="/produits/tous_les_produits"
          className="-mt-10 md:-mt-8 lg:-mt-10 text-sm font-semibold text-slate-800 hover:text-slate-600/80"
        >
          Voir tous les produits &rarr;
        </Link>
      </div>

      <div className="w-full relative">
        <div className="absolute inset-0">
          <Image
            src="/bac-a-pates.webp"
            alt="catégories"
            fill
            sizes="100vw"
            className="object-cover border-none"
          />
        </div>
        <div className="relative z-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 auto-rows-fr gap-0">
          {categories.map((item, index) => (
            <Link
              href={item.link}
              className={`w-full ${
                index === 0
                  ? "md:col-span-2 md:row-span-2"
                  : index === 1
                    ? "md:row-span-2"
                    : item.title === "Stockage des pâtes & ingrédients"
                      ? "md:row-span-2"
                      : ""
              }`}
              key={index}
            >
              <div className="relative bg-black bg-opacity-30 w-full h-full min-h-[200px] transition-all duration-300 hover:bg-opacity-50 border-4 lg:border-2 border-[#fffdf3]">
                <p className="text-white text-xl sm:text-2xl md:text-3xl p-3 font-bold absolute inset-0 flex items-end justify-start uppercase">
                  {item.title}
                </p>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );

问题： 边框（使用 border-4 和 lg:border-2 定义）在以下情况下显示为额外边框或双边框：

我放大页面。 我查看特定格式的页面，例如 iPad Air。 这种行为不一致，我无法弄清楚是什么原因造成的。

还有其他人遇到过这个问题并知道如何解决吗？

感谢您的帮助！

我尝试了几种方法，例如设置 border-style: none、使用 bg-clip-padding 以及调整边框设置，但似乎没有任何效果。

示例

Answer 1

如果您尝试将页面大小调整为浏览器中的开发选项，检查视图通常会显示边框，但在构建版本中，如果仅以这种方式显示，则不会出现，否则请告诉我。