Блог

Главная - Вопросы по программированию - Google Chrome странный разрыв между разделами

Google Chrome странный разрыв между разделами

#html #css #google-chrome

#HTML #css #google-chrome

Вопрос:

Когда я просто вставил некоторые <div> в <html> и включил режим «Эмулируемые устройства». Между ними обнаружился какой-то странный разрыв <div> . Это выглядит следующим образом:

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

Вот мой код:

 li {
  height: 360px;
  background: #000;
}

html,
body {
  margin: 0;
  padding: 0;
}

div {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  height: 360px;
  background: #000;
}  
 <div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Эта проблема возникла только в Google Chrome «Эмулируемые устройства». Как я могу это исправить?

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

1. Возможно, это из-за -webkit-margin-before: 0px;-webkit-margin-after: 0px; попробуйте это, если нет, пожалуйста, с помощью инструмента разработчика измените значение (например, -webkit-margin-before: -1px;-webkit-margin-after: 0px; ) и увидите, что это может вам помочь.

2. да, исправил это, установив -webkit-margin-before: -2px, но, похоже, это взлом css, интересно, почему это произошло, может быть, это ошибка webkit?

3. вы также можете добавить такой же фон к элементу body

Ответ №1:

Я полагаю, что это вызвано пробелом между предыдущим </div> и следующим <div> . Удалите все интервалы или используйте комментарий между ними в HTML.

Аналогичная проблема возникает при использовании встроенного блока и 50% внутри блочного div при 100%.