fix(breadcrumb): 第10次修复 - 统一alignItems对齐策略
根因(通过Playwright精确测量确认):
- Home SVG top=76, 箭头 SVG top=92, 差异16px
- Home链接没有 alignItems:'center'
- 箭头容器有 alignItems:'center' → 导致SVG被居中
修复:
- 给Home链接添加 alignItems:'center', justifyContent:'center'
- 移除无效的 verticalAlign:'middle'
- 所有SVG统一使用 display:'block'
验证结果:
- Home SVG top=91, 箭头 SVG top=92, 差异1px ✅
This commit is contained in:
@@ -21,19 +21,18 @@ export function Breadcrumb({ items }: BreadcrumbProps) {
|
||||
>
|
||||
<StaticLink
|
||||
href="/"
|
||||
className="hover:text-[#C41E3A] transition-colors align-middle"
|
||||
className="hover:text-[#C41E3A] transition-colors"
|
||||
aria-label="返回首页"
|
||||
style={{ display: 'inline-flex', verticalAlign: 'middle' }}
|
||||
style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
|
||||
>
|
||||
<Home className="w-3.5 h-3.5" style={{ display: 'block', verticalAlign: 'middle' }} />
|
||||
<Home className="w-3.5 h-3.5" style={{ display: 'block' }} />
|
||||
</StaticLink>
|
||||
{items.map((item, index) => (
|
||||
<span key={index} style={{ display: 'inline-flex', verticalAlign: 'middle', alignItems: 'center' }}>
|
||||
<ChevronRight className="w-3 h-3 text-[#CCCCCC] shrink-0 mx-0.5" />
|
||||
<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' }} />
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="hover:text-[#C41E3A] transition-colors"
|
||||
style={{ verticalAlign: 'middle' }}
|
||||
>
|
||||
{item.label}
|
||||
</StaticLink>
|
||||
|
||||
Reference in New Issue
Block a user