Comment supprimer les écarts étranges entre trois divs ayant la même couleur de fond?

23

Je lutte avec ce problème depuis un bon moment maintenant. Le problème peut être constaté sur les appareils mobiles (Android et iOS), certains appareils peuvent nécessiter un zoom avant un peu. Sur PC, je peux également reproduire ce bug sur le navigateur Chrome lors du passage en mode mobile. Ci-dessous le code utilisé pour reproduire le bogue:

<!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>
Développer l'extrait

Le résultat attendu serait une div remplie de couleur # 553213. Cependant, sur certains appareils mobiles, ils affichent des lignes (ou espaces) supplémentaires entre ces trois divisions.

Om mon iPhone

entrez la description de l'image ici

Sur mon PC, à l'aide du navigateur Chrome avec le mode mobile

entrez la description de l'image ici

Est-ce que quelqu'un sait ce qui se passe ici? Toutes les idées sur la façon dont cela se produit et comment y remédier seraient vraiment appréciées.

html css Nguyen You
la source
3
Pourquoi avez-vous une marge 0? Je ne peux pas reproduire, essayez peut-être de régler la marge à -1px sur chaque div.
Madison Courto
3
Pareil ici. Impossible de reproduire sur un PC. Probablement un problème de navigateur de téléphone.
asprin
3
problèmes de navigateur mobile probablement
louie kim
3
Il semble que ce soit un problème avec certains navigateurs / systèmes d'exploitation / appareils. Cela signifie probablement que vous ne pouvez «corriger» cela qu'en utilisant un hack. Ou suggérez aux développeurs de ces navigateurs / systèmes d'exploitation / appareils de corriger le bogue.
Daan
2
Étant donné que tous ces divs ont le même arrière-plan, ne pouvez-vous pas simplement mettre la couleur d'arrière-plan sur l'élément parent à la place?
Moob

Réponses:

6

J'ai trouvé cette réponse.

Donc , la solution est d'ajouter un margin-top: -1px;à top, middleet les bottomclasses.

<!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>
Développer l'extrait

Et ça a l'air bien sur mobile et PC aussi. La divhauteur ne change pas. Cela reste 300px.

Kicsi Viziló
la source
5

Je suppose que cela est dû à l'échelle de la page. Essayez d'ajouter cette balise META à la tête:

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

Alex
la source
4

Après avoir lu les commentaires, j'ai vu que Madison Courto avait une suggestion de

margin: -1px;

ce qui a été confirmé pour résoudre le problème réel, mais cela a provoqué des problèmes dans d'autres parties de la page. Appliquons donc cette idée aux divs réels uniquement:

<!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
la source
3

Essayez avec background. Cela fonctionne bien dans mon mobile:

<!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>
Développer l'extrait

Je ne sais pas quelle est la cause réelle. mais quand j'ai essayé ci-dessous, la couleur des lignes blanches converties en noir, j'ai eu cette idée:

<!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>
Développer l'extrait

cliquez sur div en haut ou en bas

Ritesh Khandekar
la source
2

La raison de ce problème peut être due à la façon display blockdont les inline-blockstyles sont gérés par différents navigateurs sur différents écrans.

par exemple, les inline-blockéléments auront un petit espace automatique à droite. les gens résolvent généralement cela en utilisant le négatif margin-left.

Par défaut, a divest un blockélément de niveau.

Cet espace inférieur auquel vous avez été confronté pourrait également être dû à la façon dont les éléments de niveau bloc sont traités.

Comme résoudre l' inline-blockespace avec un négatif margin-left,

cet blockespace de niveau peut être résolu en utilisant

  • négatif margin-topou
  • changer divle style de soit en table, table-celltaper ou flexboxtaper en utilisant css
Ganeshkumar K
la source
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>
Développer l'extrait

umair
la source
1

ajoutez un petit contour pour masquer ce problème:

.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>
Développer l'extrait

Temani Afif
la source
Ça ne marche pas
Nguyen You
@NguyenYou même si vous essayez 1px?
Temani Afif
1
Ouaip! Cependant, j'ai trouvé quelque chose de vraiment intéressant en augmentant la largeur du contour à 35 pixels. Un tas de lacunes étranges apparaissent.
Nguyen You
1

Essayez simplement d'ajouter la marge inférieure aux divisions supérieure et intermédiaire.

<!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>
Développer l'extrait

J'espère que cela t'aides.

Allabakash
la source
1

Utilisez l'affichage et le bas de la marge pour fixer le style. 

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

Utilisez l'affichage et le bas de la marge pour fixer le style.

<!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>
Développer l'extrait

umair
la source