Wie entferne ich seltsame Lücken zwischen drei Divs mit derselben Hintergrundfarbe?

23

Ich habe jetzt schon eine ganze Weile mit diesem Problem zu kämpfen. Das Problem tritt auf Mobilgeräten (Android und iOS) auf. Einige Geräte müssen möglicherweise etwas vergrößert werden. Auf dem PC kann ich diesen Fehler auch im Chrome-Browser reproduzieren, wenn ich in den mobilen Modus wechsle. Unten ist der Code, mit dem der Fehler reproduziert wird:

<!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>
Erweitern Sie das Snippet

Das erwartete Ergebnis wäre ein Div, das mit der Farbe # 553213 erfüllt wird. Auf einigen Mobilgeräten werden jedoch zusätzliche Linien (oder Lücken) zwischen diesen drei Divs angezeigt.

Om mein iPhone

Geben Sie hier die Bildbeschreibung ein

Verwenden Sie auf meinem PC den Chrome-Browser im mobilen Modus

Geben Sie hier die Bildbeschreibung ein

Weiß jemand, was hier los ist? Alle Ideen darüber, wie es passiert und wie es behoben werden kann, wären sehr willkommen.

html css Nguyen Sie
quelle
3
Warum haben Sie Rand 0? Ich kann nicht reproduzieren, vielleicht versuche ich, den Rand für jedes Div auf -1px zu setzen.
Madison Courto
3
Hier gilt das gleiche. Kann nicht auf einem PC reproduziert werden. Wahrscheinlich ein Problem mit dem Telefonbrowser.
Asprin
3
Probleme mit dem mobilen Browser wahrscheinlich
Louie Kim
3
Es scheint, dass dies ein Problem mit bestimmten Browsern / Betriebssystemen / Geräten ist. Dies bedeutet wahrscheinlich, dass Sie dies nur mithilfe eines Hacks beheben können. Oder schlagen Sie den Entwicklern dieser Browser / Betriebssysteme / Geräte vor, um den Fehler zu beheben.
Daan
2
Da alle diese Divs denselben Hintergrund haben, können Sie nicht stattdessen einfach die Hintergrundfarbe auf das übergeordnete Element setzen?
Moob

Antworten:

6

Ich habe diese Antwort gefunden.

So ist die Lösung ist ein hinzufügen margin-top: -1px;zu top, middleund bottomKlassen.

<!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>
Erweitern Sie das Snippet

Und es sieht auch auf Mobilgeräten und PCs gut aus. Die divHöhe ändert sich nicht. Es bleibt 300px.

Kicsi Viziló
quelle
5

Ich denke, das liegt an der Größe der Seite. Versuchen Sie, dieses Meta-Tag dem Kopf hinzuzufügen:

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

Alex
quelle
4

Nachdem ich die Kommentare gelesen habe, habe ich gesehen, dass Madison Courto einen Vorschlag von hatte

margin: -1px;

Dies wurde zur Lösung des eigentlichen Problems bestätigt, hat jedoch Probleme in anderen Teilen der Seite verursacht. Wenden wir diese Idee also nur auf die tatsächlichen Divs an:

<!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
quelle
3

Versuchen Sie es mit background. Dies funktioniert gut in meinem Handy:

<!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>
Erweitern Sie das Snippet

Ich weiß nicht, was die eigentliche Ursache ist. Aber als ich unten versuchte, die Farbe der weißen Linien in Schwarz umzuwandeln, kam mir die Idee:

<!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>
Erweitern Sie das Snippet

Klicken Sie auf oben oder unten div

Ritesh Khandekar
quelle
2

Der Grund für dieses Problem könnte der Weg sein display block,inline-block Stile von verschiedenen Browsern auf verschiedenen Bildschirmen verarbeitet werden.

Beispielsweise haben inline-blockElemente rechts automatisch einen kleinen Raum. Menschen lösen dies normalerweise mit Negativ margin-left.

Standardmäßig ist a divablock Ebenenelement.

Dieser untere Bereich, dem Sie gegenübergestanden haben, kann auch an der Art und Weise liegen, wie Elemente auf Blockebene behandelt werden.

Als würde man den inline-blockRaum mit dem Negativen lösenmargin-left ,

Dieser blockEbenenraum kann entweder mit gelöst werden

  • Negativ margin-top oder
  • Ändern divdes Stils in entweder table, table-cellTyp oder flexboxTyp mit CSS
Ganeshkumar K.
quelle
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>
Erweitern Sie das Snippet

umair
quelle
1

Fügen Sie eine kleine Gliederung hinzu, um dieses Problem zu verbergen :

.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>
Erweitern Sie das Snippet

Temani Afif
quelle
Es funktioniert nicht
Nguyen You
@NguyenSie auch wenn Sie 1px versuchen?
Temani Afif
1
Jep! Ich fand jedoch etwas wirklich Interessantes, als ich die Umrissbreite auf 35px erhöhte. Eine Reihe von seltsamen Lücken erscheinen.
Nguyen Sie
1

Versuchen Sie einfach, den unteren Rand zu den oberen und mittleren Divs hinzuzufügen.

<!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>
Erweitern Sie das Snippet

Hoffe das hilft.

Allabakash
quelle
1

Verwenden Sie die Anzeige und den unteren Rand, um das Styling zu korrigieren. 

.top, .middle, .bottom {
    height: 100px;
    background-color: #553213;
    margin-bottom: 5px;
    display: block;
}
umair
quelle
1

Verwenden Sie die Anzeige und den unteren Rand, um das Styling zu korrigieren.

<!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>
Erweitern Sie das Snippet

umair
quelle