我已经使用css显示具有右侧角度的标签(向导类型)。它可以在Chrome&IE 11上正常工作。但是在Mozilla Firefox中,它在底部显示了额外的一行(请参见截屏):

html - Mozilla Firefox中CSS标签无法正确显示-LMLPHP

JSFiddle:https://jsfiddle.net/LwdejrLm/



.tabs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs.three li {
  width: 31.4%;
}

.tabs.four li {
  width: 23%;
}

.tabs>li {
  position: relative;
  overflow: visible;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  float: left;
}

.tabs>li+li {
  margin-left: 0;
}

.tabs>li:first-child {
  border-left: 0;
}

.tabs>li:last-child {
  border-right: 0;
}

.tabs>li span {
  border-radius: 0;
  background-color: #e04411;
  padding: 10px;
  display: inline-block;
  padding: 11px 20px;
  color: #fff;
  width: 100%;
}

.tabs>li .tbno {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 0;
  top: 5px;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  padding: 5px;
}

.tabs>li:last-child .tbno {
  right: -30px;
}

.tabs>li .nav-arrow {
  position: absolute;
  top: 0px;
  right: -30px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 10px 20px 20px;
  border-color: #fff #fff #fff #e04411;
  z-index: 150;
}

.tabs>li .nav-wedge {
  position: absolute;
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: #e04411 #eeeeee #e04411 transparent;
  z-index: 150;
}

.tabs>li.active .nav-arrow {
  border-color: #fff #fff #fff #444;
}

.tabs>li.active .nav-wedge {
  border-color: #444 #444 #444 transparent;
}

.tabs>li.active span {
  background-color: #444;
  color: #fff;
  width: 100%;
}

@media (max-width: 1200px) {
  .tabs.three li {
    width: 22%;
  }
  .tabs.four li {
    width: 22%;
  }
}

@media (max-width: 992px) {
  .tabs.four li {
    width: 20%;
  }
}

@media (max-width: 640px) {
  .tabs.four li {
    width: 18.5%;
  }
  .tabs>li span {
    padding: 11px 6px;
  }
  .tabs>li .tbno {
    display: none;
  }
}

@media (max-width: 400px) {
  .tabs.four li {
    width: 17%;
  }
}

<ul class="tabs four">
  <li><span>Booking</span>
    <div class="tbno">1</div>
    <div class="nav-arrow"></div>
  </li>
  <li>
    <div class="nav-wedge"></div>
    <span>Services</span>
    <div class="tbno">2</div>
    <div class="nav-arrow"></div>
  </li>
  <li class="active">
    <div class="nav-wedge"></div>
    <span>Confirmation</span>
    <div class="tbno">3</div>
    <div class="nav-arrow"></div>
  </li>
  <li>
    <div class="nav-wedge"></div>
    <span>Payment</span>
    <div class="tbno">4</div>
  </li>
</ul>

最佳答案

.tabs>li spaninline-block元素,它继承了一些属性,例如line-height是它的父级,因此您需要重置它。

.tabs>li span{
  line-height: 1;
  height: 40px;
  box-sizing: border-box;
}




.tabs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs.three li {
  width: 31.4%;
}

.tabs.four li {
  width: 23%;
}

.tabs>li {
  position: relative;
  overflow: visible;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  float: left;
}

.tabs>li+li {
  margin-left: 0;
}

.tabs>li:first-child {
  border-left: 0;
}

.tabs>li:last-child {
  border-right: 0;
}

.tabs>li span {
  border-radius: 0;
  background-color: #e04411;
  padding: 10px;
  display: inline-block;
  padding: 11px 20px;
  color: #fff;
  width: 100%;
  line-height: 1;
  height: 40px;
  box-sizing: border-box;
}

.tabs>li .tbno {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 0;
  top: 5px;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  padding: 5px;
}

.tabs>li:last-child .tbno {
  right: -30px;
}

.tabs>li .nav-arrow {
  position: absolute;
  top: 0px;
  right: -30px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 10px 20px 20px;
  border-color: #fff #fff #fff #e04411;
  z-index: 150;
}

.tabs>li .nav-wedge {
  position: absolute;
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: #e04411 #eeeeee #e04411 transparent;
  z-index: 150;
}

.tabs>li.active .nav-arrow {
  border-color: #fff #fff #fff #444;
}

.tabs>li.active .nav-wedge {
  border-color: #444 #444 #444 transparent;
}

.tabs>li.active span {
  background-color: #444;
  color: #fff;
  width: 100%;
}

@media (max-width: 1200px) {
  .tabs.three li {
    width: 22%;
  }
  .tabs.four li {
    width: 22%;
  }
}

@media (max-width: 992px) {
  .tabs.four li {
    width: 20%;
  }
}

@media (max-width: 640px) {
  .tabs.four li {
    width: 18.5%;
  }
  .tabs>li span {
    padding: 11px 6px;
  }
  .tabs>li .tbno {
    display: none;
  }
}

@media (max-width: 400px) {
  .tabs.four li {
    width: 17%;
  }
}

<ul class="tabs four">
  <li><span>Booking</span>
    <div class="tbno">1</div>
    <div class="nav-arrow"></div>
  </li>
  <li>
    <div class="nav-wedge"></div>
    <span>Services</span>
    <div class="tbno">2</div>
    <div class="nav-arrow"></div>
  </li>
  <li class="active">
    <div class="nav-wedge"></div>
    <span>Confirmation</span>
    <div class="tbno">3</div>
    <div class="nav-arrow"></div>
  </li>
  <li>
    <div class="nav-wedge"></div>
    <span>Payment</span>
    <div class="tbno">4</div>
  </li>
</ul>





Source

10-07 19:12
查看更多