小编Gab*_*uza的帖子

使用Font Awesome的星级评分在Edge和IE上无法正常工作

使用下面提供的宽度定义的Font Awesome的星级评级在Chrome和Firefox上工作正常,但在Edge和IE上没有.任何人都知道它会是什么？

Chrome和Firefox

Edge和IE

.star-rating {
  display: inline-block;
  position: relative;
  line-height: 1;
}
.star-rating:before,
.star-rating:after {
  content: "\f005\f005\f005\f005\f005";
  display: block;
  font-family: "FontAwesome";
  font-size: 25px;
  color: #ccc;
}
.star-rating:after {
  color: gold;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.star-rating.s0:after {
  width: 0%;
}
.star-rating.s1:after {
  width: 10%;
}
.star-rating.s2:after {
  width: 20%;
}
.star-rating.s3:after {
  width: 30%;
}
.star-rating.s4:after {
  width: 40%;
}
.star-rating.s5:after {
  width: 50%;
}
.star-rating.s6:after {
  width: 60%;
}
.star-rating.s7:after {
  width: 70%; …

Run Code Online (Sandbox Code Playgroud)

html css css3 font-awesome

Gab*_*uza

lucky-day

5
推荐指数

1
解决办法

576
查看次数

容器外的 Swiper 导航按钮

我试图在 swiper 容器外显示导航按钮，因为容器溢出：隐藏我不得不创建一个带有位置的包装：相对并绝对定位按钮。

那行得通，问题是现在导航按钮控制所有滑块，我想不出解决这个问题的方法。

如果滑块与不同的内容相同，我不想用不同的类初始化多个滑块。

JSFiddle

var sliderProdutosDestaque = new Swiper('.slider-produtos-destaque.swiper-container', {
  slidesPerView: 2,
  spaceBetween: 10,
  navigation: {
    nextEl: '.swiper-next',
    prevEl: '.swiper-prev',
  }
});

Run Code Online (Sandbox Code Playgroud)

body {
  padding: 20px 60px 40px;
}

.slider-produtos-wrap {
  position: relative;
  width: 100%;
  margin-top: 20px;
}

.swiper-slide {
  z-index: 1;
  height: 150px;
  background: blue;
}

.swiper-prev,
.swiper-next {
  width: 60px;
  height: 60px;
  background: red;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 60px;
  z-index: 9999;
}

.swiper-prev {
  left: -30px;
}

.swiper-next {
  right: -30px;
}

Run Code Online (Sandbox Code Playgroud)