Html CSS箭头面包屑在firefox中看起来很模糊

我的箭头面包屑在firefox中看起来有点模糊，但在chrome、opera和ie中却很好

以下是firefox中的外观：

我的HTML

<div class="row">
  <div class="tab-progress btn-breadcrumb clearfix text-center">
    <div class="arrow-nav col-xs-4">1</div>
    <div class="arrow-nav col-xs-4">2</div>
    <div class="active-arrow arrow-nav col-xs-4">3</div>
  </div>
</div>

1.
2.
3.

我想我了解你想要什么，但你的CSS有点不对劲

我将

活动箭头

设置为实际创建箭头的箭头，这样无论其位置如何，它都能准确地知道要在哪个箭头上执行操作

正文{
填充：3em；
背景：#B9B9B9；
}
.行{
背景：白色；
}
.btn面包屑箭头导航{
填充：15px 0 15px 0；
}
.btn面包屑.箭头导航：第一个孩子{
填充：15px 0 15px 0；
}
.btn面包屑.箭头导航：最后一个孩子{
填充：15px 0 15px 0；
}
.主动箭头{
背景色：#2a53a5；
颜色：白色；
边界半径：0；
}
.活动箭头.数字圆圈{
颜色：白色；
}
.活动箭头：悬停{
颜色：白色；
}
.活动箭头：之前{
内容：''；
宽度：0；
身高：0；
边框顶部：25px实心rgba（255、255、255、0）；
边框底部：25px实心rgba（255、255、255、0）；
左边框：10px纯白；
位置：绝对位置；
左：0；
排名：0；
}
.活动箭头：之后{
内容：''；
宽度：0；
身高：0；
边框顶部：25像素点白色；
边框底部：25像素点白色；
左边框：10px点状rgba（255，255，255，0）；
位置：绝对位置；
排名：0；
右：0；
}
.箭头导航：最后一个子项。活动箭头：之后{
边界：无；
}
.箭头导航：未（.active arrow）：在之前{
内容：''；
边框顶部：25px实心透明；
边框底部：25px实心透明；
左边框：10px纯色灰色；
位置：绝对位置；
右：-10px；
排名：0；
}
.箭头导航：非（.active arrow）：之后{
内容：''；
边框顶部：25px实心透明；
边框底部：25px实心透明；
左边框：10px纯白；
位置：绝对位置；
右：-9px；
排名：0；
}
.arrow导航：最后一个子项：非（.active arrow）：之后，
.arrow导航：最后一个子项：非（.active arrow）：之前{
边界：0；
}

1.
2.
3.
1.
2.
3.
1.
2.
3.

可能重复感谢您的回答，但我仍然需要的是它们之间的分隔符，该行在FirefoxYes中显示模糊！你让它看起来很简单，我应该加强我的游戏：D@Eli当前位置Stewart的回答很好。你会发现这一条也有点有用（不是愚弄，因为你的问题不同，而是链接只是为了帮助）。@Stewartside非常感谢，我希望有一天我能像你一样好