在Chrome移动模式下删除元素中的细线边框

Question

我遇到的问题是Chrome和其他主流浏览器在移动设备上的元素周围添加了细线边框。 注意： 仅在移动设备上发生。

https://codepen.io/AlphaT7/pen/bMoQpz

如果您在Chrome开发工具中使用移动模式，或仅使用移动设备，则可以看到它。

设置border: 0;无法解决问题。如何删除这些元素轮廓？

Answer 1

将此添加到ur css

.checkout-progress .progress-bar li .triangle2 {
    border-left-color: white;
    left: -1px; //change this value from 0 to -1px
}

它不是边框，它是 a tag 的一部分，可以从 triangle2

后面看到

将left的值从0设置为-1会将traingle2更多地推到左侧，从而隐藏 a tag 背景可见

还通过将边框宽度设置为15px

来调整traingle的高度

＆＃13;

＆＃13;

.checkout-progress {
  clear: both;
  width: 800px;
  margin: 70px auto;
}

.checkout-progress .progress-bar {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.checkout-progress .progress-bar li {
  position: relative;
  float: left;
  background: #eee;
  border-left: 1px solid #fff;
  margin-right: 13px;
}

.checkout-progress .progress-bar li .triangle,
.checkout-progress .progress-bar li .triangle2 {
  display: block;
  position: absolute;
  top: 0;
  right: -10px;
  height: 0;
  width: 0;
  border-top: 15px solid transparent;
  border-left: 10px solid #eee;
  border-bottom: 15px solid transparent;
  z-index: 1;
}

.checkout-progress .progress-bar li .triangle2 {
  border-left-color: white;
  left: -1px;
}

.checkout-progress .progress-bar li:first-child {
  border: 0;
}

.checkout-progress .progress-bar li.current-step {
  background: green;
}

.checkout-progress .progress-bar li.current-step .triangle {
  border-left: 10px solid green;
}

.checkout-progress .progress-bar li.current-step a {
  color: white;
}

.checkout-progress .progress-bar li.current-step a .step-number {
  border-color: white;
}

.checkout-progress .progress-bar li.visited-step {
  background: #bbb;
}

.checkout-progress .progress-bar li.visited-step .triangle {
  border-left: 10px solid #bbb;
}

.checkout-progress .progress-bar li a {
  letter-spacing: 1px;
  display: block;
  line-height: 31px;
  padding: 0 20px 0 30px;
  color: green;
  text-decoration: none;
  cursor: default;
}

.checkout-progress .progress-bar li a em {
  display: inline-block;
  border-radius: 50%;
  background: none;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  margin-right: 14px;
  border: 1px solid #999;
  font-size: 13px;
  font-style: normal;
}

＆＃13;

<div class="checkout-progress">
  <ul class="progress-bar">
    <li class="checkout-step1 visited-step">
      <span class="triangle2"></span>
      <a href="#"><em>1</em>First Step</a>
      <span class="triangle after"></span>
    </li>
    <li class="checkout-step2 current-step">
      <span class="triangle2"></span>
      <a href="#"><em>2</em>Second Step</a>
      <span class="triangle"></span>
    </li>
    <li class="checkout-step3">
      <span class="triangle2"></span>
      <a href="#"><em>3</em>Third Step</a>
      <span class="triangle"></span>
    </li>
    <li class="checkout-step4">
      <span class="triangle2"></span>
      <a href="#"><em>4</em>Fourth Step</a>
      <span class="triangle"></span>
    </li>
  </ul>
</div>
<br><br>

＆＃13;

＆＃13;

＆＃13;