Убрать границу волос в элементах в мобильном режиме Chrome

У меня проблема из-за того, что Chrome и другие основные браузеры добавляют границу волос вокруг элементов на мобильных устройствах. Примечание:Это происходит только на мобильных устройствах.

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

Вы можете увидеть это, если используете мобильный режим в инструментах chrome dev или просто используете мобильное устройство.

Установка border: 0; не исправляет. Как удалить эти контуры элементов?

Убрать границу волос в элементах в мобильном режиме Chrome

Я не могу воспроизвести это с помощью Chrome для мобильных устройств или с помощью инструментов разработчика Chrome. Можете ли вы предоставить снимок экрана с границей линии роста волос?

— 06.05.2018 16:27

конечно, сделали

— 06.05.2018 16:36

html css border

06.05.2018 16:14

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

551

Ответы 1

Добавьте это в ur css

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

Это не граница, это часть тег, которая видна из-за треугольник2

Установка значения left от 0 до -1 сдвинет traingle2 еще влево, тем самым скрывая видимый фон тег

Также скорректирована высота traingle, установив ширину границы на 15 пикселей.

.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;
}

<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>

Хотел бы я отметить это как ответ, но после того, как я возился с ним в течение пары часов, он просто не дал удовлетворительных результатов. Другие части не выровнены, и, в конце концов, в некоторых элементах все еще виден контур.

— 06.05.2018 19:36

06.05.2018 16:38