Блог

Главная - Вопросы по программированию - Нежелательные пробелы во встроенных разделителях при определенных разрешениях [chrome]

Нежелательные пробелы во встроенных разделителях при определенных разрешениях [chrome]

#html #css

Вопрос:

У меня есть компонент React, который пытается смоделировать индикатор выполнения. Для простоты я соединил его с приведенным ниже фрагментом кода:

 .bar {
  background-color: #EAECEF;
  border: 1px solid #3D4D5B;
  height: 12px;
  width: 100%;
}

.progress {
  background-color: #3D4D5B;
  color: #000;
  height: 12px;
  width: 100%;
} 
 <html>
<body>
  <div class="bar">
    <div class="progress"></div>
  </div>
</body>
</html>

Проблема в том, что при определенных разрешениях начинают появляться нежелательные промежутки между внутренним и внешним разделителями. Это можно показать, просто увеличив масштаб (ctrl- ) отображаемого индикатора выполнения. Я заметил такое поведение только в браузерах на базе Chromium, а не в Firefox.

Кто-нибудь знает, почему это происходит, и/или у вас есть какие-либо предложения о том, как решить эту проблему?

Комментарии:

1. Это нормальное поведение.

Ответ №1:

Вы хотели бы удалить border стиль из bar элемента div? Это решит проблему.

Ответ №2:

Проблема возникла из-за границы (1 пикселей), которая появляется/исчезает при увеличении/уменьшении масштаба. Теперь вопрос решается только удалением границы.

 .bar {
  background-color: #EAECEF;
  /*border: 1px solid #3D4D5B;*/
  height: 12px;
  width: 100%;
}

.progress {
  background-color: #3D4D5B;
  color: #000;
  height: 12px;
  width: 100%;
} 
 <html>
<body>
  <div class="bar">
    <div class="progress"></div>
  </div>
</body>
</html>
Метки: