src/components/layout/breadcrumb.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Fragment } from 'react';
 import { StaticLink } from '@/components/ui/static-link';
 import { ChevronRight, Home } from 'lucide-react';
 
@@ -16,27 +17,28 @@ export function Breadcrumb({ items }: BreadcrumbProps) {
   return (
     <nav
       aria-label="breadcrumb"
-      className="flex items-center gap-1 text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4"
+      className="flex items-center text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4"
       style={{ lineHeight: '1' }}
     >
       <StaticLink
         href="/"
-        className="hover:text-[#C41E3A] transition-colors"
+        className="hover:text-[#C41E3A] transition-colors shrink-0"
         aria-label="返回首页"
-        style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
+        style={{ minHeight: 0, minWidth: 0 }}
       >
-        <Home className="w-3.5 h-3.5" style={{ display: 'block' }} />
+        <Home className="w-3.5 h-3.5" />
       </StaticLink>
       {items.map((item, index) => (
-        <span key={index} style={{ display: 'inline-flex', alignItems: 'center' }}>
-          <ChevronRight className="w-3 h-3 text-[#CCCCCC] shrink-0 mx-0.5" style={{ display: 'block' }} />
+        <Fragment key={index}>
+          <ChevronRight className="w-3 h-3 text-[#CCCCCC] shrink-0 mx-1" />
           <StaticLink
             href={item.href}
-            className="hover:text-[#C41E3A] transition-colors"
+            className="hover:text-[#C41E3A] transition-colors whitespace-nowrap"
+            style={{ minHeight: 0, minWidth: 0 }}
           >
             {item.label}
           </StaticLink>
-        </span>
+        </Fragment>
       ))}
     </nav>
   );