Как убрать странные промежутки между тремя элементами, имеющими одинаковый цвет фона?

23

Я уже давно борюсь с этой проблемой. Эту проблему можно увидеть на мобильных устройствах (Android и iOS), некоторые устройства могут быть немного увеличены. На ПК я также могу воспроизвести эту ошибку в браузере Chrome при переключении в мобильный режим. Ниже приведен код, используемый для воспроизведения ошибки:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
    }
    .middle {
      height: 100px;
      background-color: #553213;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>
Развернуть фрагмент

Ожидаемый результат будет div, который выполняется с цветом # 553213. Однако на некоторых мобильных устройствах они отображают дополнительные линии (или промежутки) между этими тремя элементами.

Ом мой айфон

введите описание изображения здесь

На моем ПК, используя браузер Chrome с мобильным режимом

введите описание изображения здесь

Кто-нибудь знает, что здесь происходит? Буду очень признателен за любые идеи о том, как это происходит и как это исправить.

html css Нгуен Ю
источник
3
Почему у вас маржа 0? Я не могу воспроизвести, возможно, попробуйте установить поле на -1px на каждом div.
Мэдисон Курто
3
Тоже самое. Невозможно воспроизвести на ПК. Вероятно, проблема с браузером телефона.
Асприн
3
проблемы с мобильным браузером
Луи Ким
3
Кажется, что это проблема с некоторыми браузерами / операционными системами / устройствами. Это, вероятно, означает, что вы можете «исправить» это только с помощью взлома. Или предложите разработчикам этих браузеров / операционных систем / устройств исправить ошибку.
Даан
2
Поскольку все эти элементы имеют одинаковый фон, не могли бы вы вместо этого поместить цвет фона на родительский элемент?
Муб

Ответы:

6

Я нашел этот ответ.

Таким образом, решение добавить margin-top: -1px;к top, middleи bottomклассы.

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
    }
    .middle {
      height: 100px;
      background-color: #553213;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
    
    .top, .middle, .bottom {
      margin-top: -1px;
    }

  </style>
</head>
<body>
  <div style="width:300px; height: 300px;">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>
Развернуть фрагмент

И это выглядит хорошо на мобильных и ПК тоже. Высота divs не меняется. Осталось 300px.

Кичси Визило
источник
5

Я думаю, это связано с масштабом страницы. Попробуйте добавить этот метатег к голове:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

Alex
источник
4

Прочитав комментарии, я увидел, что у Мэдисон Курто было предложение

margin: -1px;

что было подтверждено для решения актуальной проблемы, но это вызвало проблемы в других частях страницы. Итак, давайте применим эту идею только к фактическим элементам div:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
    }
    .middle {
      height: 100px;
      background-color: #553213;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top" style="margin: -1px;"></div>
    <div class="middle" style="margin: -1px;"></div>
    <div class="bottom" style="margin: -1px;"></div>
  </div>
</body>
</html>
Лайос Арпад
источник
3

Попробуй с background. Это прекрасно работает на моем мобильном телефоне:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
    }
    .middle {
      height: 100px;
      }
    .bottom {
      height: 100px;
      }
    div{
      background:#553213;
    }
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>
Развернуть фрагмент

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

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
    }
    .middle {
      height: 100px;
      background-color: #553213;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
    div:hover{background:#000;}
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>
Развернуть фрагмент

нажмите сверху или снизу div

Ритеш Хандекар
источник
2

Причина этой проблемы может быть связана с тем , как display block, inline-blockстили быть обработаны различными браузерами на разных экранах.

например, inline-blockэлементы будут иметь небольшое пространство справа. люди обычно решают это, используя негатив margin-left.

По умолчанию a divявляется blockэлементом уровня.

Это нижнее пространство, с которым вы столкнулись, также может быть связано с тем, как обрабатываются элементы уровня блока.

Как решение inline-blockпространства с отрицательным margin-left,

это blockпространство уровня может быть решено с помощью

  • отрицательный margin-topили
  • изменение divстиля «s либо table, table-cellтипа или flexboxтипа с использованием CSS
Ганешкумар К
источник
2 

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .top,
        .middle,
        .bottom {
            min-height: 100px;
            width: 100%;
            background-color: #553213;
            margin-bottom: -6px;
            display: inline-block;
            padding: 15px 0;
        }
    </style>
</head>

<body>
    <div style="width:300px; height: 300px">
        <div class="top"></div>
        <div class="middle"></div>
        <div class="bottom"></div>
    </div>
</body>

</html>
Развернуть фрагмент

Umair
источник
1

Добавьте небольшую схему, чтобы скрыть эту проблему:

.container > * {
  height: 100px;
  background-color: #553213;
  outline:1px solid #553213;
}

.container {
  width:300px;
  height:300px;
}
<div  class="container">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>
Развернуть фрагмент

Темани Афиф
источник
Это не работает
Нгуен
@NguyenYou, даже если вы попробуете 1px?
Темани Афиф
1
Ага! Однако я обнаружил кое-что действительно интересное, увеличив ширину контура до 35 пикселей. Появляется куча странных пробелов.
Нгуен
1

Просто попробуйте добавить поле margin-bottom к верхним и средним элементам div.

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
	  margin-bottom: -2px;
    }
    .middle {
      height: 100px;
      background-color: #553213;
	  margin-bottom: -2px;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>
Развернуть фрагмент

Надеюсь это поможет.

Allabakash
источник
1

Используйте дисплей и поля снизу, чтобы исправить стиль. 

.top, .middle, .bottom {
    height: 100px;
    background-color: #553213;
    margin-bottom: 5px;
    display: block;
}
Umair
источник
1

Используйте дисплей и поля снизу, чтобы исправить стиль.

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
  .top, .middle, .bottom {
    height: 100px;
    background-color: #553213;
    margin-bottom: 5px;
    display: block;
}
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>
Развернуть фрагмент

Umair
источник