Jak usunąć dziwne luki między trzema divami o tym samym kolorze tła?

23

Od dłuższego czasu walczę z tym problemem. Problem można zobaczyć na urządzeniach mobilnych (Android i iOS), niektóre urządzenia mogą wymagać nieco większego powiększenia. Na komputerze mogę również odtworzyć ten błąd w przeglądarce Chrome po przełączeniu do trybu mobilnego. Poniżej znajduje się kod używany do odtworzenia błędu:

<!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>
Rozwiń fragment kodu

Oczekiwanym rezultatem byłby div, który zostałby spełniony kolorem # 553213. Jednak na niektórych urządzeniach mobilnych wyświetlają dodatkowe linie (lub przerwy) między tymi trzema divami.

Om mój iPhone

wprowadź opis zdjęcia tutaj

Na moim komputerze za pomocą przeglądarki Chrome w trybie mobilnym

wprowadź opis zdjęcia tutaj

Czy ktoś wie, co się tutaj dzieje? Wszelkie pomysły dotyczące tego, jak to się dzieje i jak to naprawić, byłyby bardzo mile widziane.

html css Nguyen You
źródło
3
Dlaczego masz margines 0? Nie mogę się odtworzyć, być może spróbuj ustawić margines na -1px na każdym divie.
Madison Courto,
3
To samo tutaj. Nie można powielać na komputerze. Prawdopodobnie problem z przeglądarką telefonu.
asprin
3
Prawdopodobnie występują problemy z przeglądarką mobilną
Lou Kim
3
Wygląda na to, że jest to problem z niektórymi przeglądarkami / systemami operacyjnymi / urządzeniami. Prawdopodobnie oznacza to, że możesz to naprawić tylko za pomocą hacka. Lub zasugeruj twórcom tych przeglądarek / systemów operacyjnych / urządzeń, aby naprawili błąd.
Daan,
2
Ponieważ wszystkie te divy mają to samo tło, czy nie możesz zamiast tego po prostu ustawić koloru tła na elemencie nadrzędnym?
Moob,

Odpowiedzi:

6

Znalazłem tę odpowiedź.

Więc rozwiązaniem jest dodanie margin-top: -1px;do top, middlei bottomklas.

<!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>
Rozwiń fragment kodu

I wygląda dobrze na urządzeniach mobilnych i komputerach PC. divS wysokość nie ulega zmianie. Pozostaje 300px.

Kicsi Viziló
źródło
5

Wydaje mi się, że wynika to ze skali strony. Spróbuj dodać ten metatag do nagłówka:

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

Alex
źródło
4

Po przeczytaniu komentarzy zobaczyłem, że Madison Courto miała sugestię

margin: -1px;

co zostało potwierdzone przez rozwiązanie rzeczywistego problemu, ale spowodowało problemy w innych częściach strony. Zastosujmy ten pomysł tylko do rzeczywistych 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>
Lajos Arpad
źródło
3

Spróbuj z background. Działa to dobrze w moim telefonie komórkowym:

<!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>
Rozwiń fragment kodu

Nie wiem, co jest prawdziwą przyczyną. ale kiedy spróbowałem poniżej, kolor białych linii przekonwertowano na czarny, wtedy wpadłem na ten pomysł:

<!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>
Rozwiń fragment kodu

kliknij górny lub dolny div

Ritesh Khandekar
źródło
2

Przyczyną tego problemu może być sposób display block, w jaki inline-blockstyle są obsługiwane przez różne przeglądarki na różnych ekranach.

na przykład inline-blockelementy będą miały automatycznie małą spację po prawej stronie. ludzie zwykle rozwiązują to za pomocą negatywu margin-left.

Domyślnie a divjest blockelementem poziomu.

Ta dolna przestrzeń, z którą się spotkałeś, może być również spowodowana sposobem obsługi elementów poziomu bloku.

Jak rozwiązywanie inline-blockprzestrzeni za pomocą negatywu margin-left,

tę blockprzestrzeń poziomu można rozwiązać za pomocą

  • negatywne margin-toplub
  • zmiana divstylu na albo table, table-cellalbo flexboxwpisz, używając css
Ganeshkumar K
źródło
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>
Rozwiń fragment kodu

umair
źródło
1

dodaj mały zarys, aby ukryć ten problem:

.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>
Rozwiń fragment kodu

Temani Afif
źródło
To nie działa
Nguyen You
@Nguyen Nawet jeśli spróbujesz 1px?
Temani Afif,
1
Tak! Jednak znalazłem coś naprawdę interesującego, gdy zwiększyłem szerokość konturu do 35 pikseli. Pojawia się kilka dziwnych luk.
Nguyen You
1

Po prostu spróbuj dodać margines do dołu do górnej i środkowej podziałki.

<!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>
Rozwiń fragment kodu

Mam nadzieję że to pomoże.

Allabakash
źródło
1

Użyj wyświetlacza i dolnego marginesu, aby naprawić styl. 

.top, .middle, .bottom {
    height: 100px;
    background-color: #553213;
    margin-bottom: 5px;
    display: block;
}
umair
źródło
1

Użyj wyświetlacza i dolnego marginesu, aby naprawić styl.

<!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>
Rozwiń fragment kodu

umair
źródło