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

Question

我的箭头面包屑在 Firefox 中看起来有点模糊，但在 chrome、Opera 和 IE 中看起来很好。 CODEPEN

这是它在 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>

CSS:

body {
  padding: 3em;
  background: #B9B9B9;
}
.row {
  background: white;
}
.btn-breadcrumb .arrow-nav:not(:last-child):after {
  content: " ";
  display: flex !important;
  width: 0;
  height: 0;
  border-top: 27px solid rgba(255, 255, 255, 0);
  border-bottom: 27px solid rgba(255, 255, 255, 0);
  border-left: 10px solid white;
  position: absolute;
  top: 33%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .arrow-nav:not(:last-child):before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 27px solid rgba(255, 255, 255, 0);
  border-bottom: 27px solid rgba(255, 255, 255, 0);
  border-left: 10px solid #E6E6E6;
  position: absolute;
  top: 33%;
  margin-top: -17px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .arrow-nav {
  padding: 15px 0 15px 0;
}
.btn-breadcrumb .arrow-nav:first-child {
  padding: 15px 0 15px 0;
}
.btn-breadcrumb .arrow-nav:last-child {
  padding: 15px 0 15px 0;
}
.active-arrow {
  background-color: #2a53a5;
  color: white;
  border-radius: 0;
}
.active-arrow .numberCircle {
  color: white;
}
.active-arrow:hover {
  color: white;
}
.active-arrow:after {
  display: flex !important;
  width: 0;
  height: 0;
  border-top: 17px solid rgba(255, 255, 255, 0);
  border-bottom: 17px solid rgba(255, 255, 255, 0);
  border-left: 10px solid #2a53a5 !important;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  border-radius: 0;
  left: 100%;
  z-index: 3;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<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>

Answer 1

我想我明白你想要什么，但你CSS有点不对劲。

我已将 active-arrow 设置为实际创建箭头的那个，因此无论其位置如何，它都确切地知道要在哪一个上创建箭头。

body {
  padding: 3em;
  background: #B9B9B9;
}
.row {
  background: white;
}
.btn-breadcrumb .arrow-nav {
  padding: 15px 0 15px 0;
}
.btn-breadcrumb .arrow-nav:first-child {
  padding: 15px 0 15px 0;
}
.btn-breadcrumb .arrow-nav:last-child {
  padding: 15px 0 15px 0;
}
.active-arrow {
  background-color: #2a53a5;
  color: white;
  border-radius: 0;
}
.active-arrow .numberCircle {
  color: white;
}
.active-arrow:hover {
  color: white;
}
.active-arrow:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 25px solid rgba(255, 255, 255, 0);
  border-bottom: 25px solid rgba(255, 255, 255, 0);
  border-left: 10px solid white;
  position: absolute;
  left: 0;
  top: 0;
}
.active-arrow:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 25px dotted white;
  border-bottom: 25px dotted white;
  border-left: 10px dotted rgba(255, 255, 255, 0);
  position: absolute;
  top: 0;
  right: 0;
}
.arrow-nav:last-child.active-arrow:after {
  border: none;
}
.arrow-nav:not(.active-arrow):before {
  content: '';
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 10px solid grey;
  position: absolute;
  right: -10px;
  top: 0;
}
.arrow-nav:not(.active-arrow):after {
  content: '';
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  right: -9px;
  top: 0;
}
.arrow-nav:last-child:not(.active-arrow):after,
.arrow-nav:last-child:not(.active-arrow):before {
  border: 0;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<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>
<div class="row">
  <div class="tab-progress btn-breadcrumb clearfix text-center">
    <div class="arrow-nav col-xs-4">1</div>
    <div class="active-arrow arrow-nav col-xs-4">2</div>
    <div class="arrow-nav col-xs-4">3</div>
  </div>
</div>
<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="arrow-nav col-xs-4">3</div>
  </div>
</div>

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

CSS arrow breadcrumbs are looking blurry in firefox

html

css

firefox

breadcrumbs

twitter-bootstrap