同じ背景色を持つ3つのdiv間の奇妙なギャップを削除するにはどうすればよいですか？

23

私はこの問題にかなり長い間取り組んでいます。この問題は、モバイルデバイス（AndroidおよびiOS）で確認できます。一部のデバイスでは、少しズームインする必要がある場合があります。PCでは、モバイルモードに切り替えるときに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>

スニペットを展開

期待される結果は、＃553213色で満たされるdivになります。ただし、一部のモバイルデバイスでは、これらの3つのdivの間に追加の線（またはギャップ）が表示されます。

Om my iPhone

私のPCでは、モバイルモードでChromeブラウザを使用しています

誰かがここで何が起こっているのか知っていますか？それがどのように発生し、それを修正する方法についてのアイデアは、本当にありがたいです。

html css

— グエン・ユー
ソース

3

なぜマージン0があるのですか？再現できません。各divのマージンを-1pxに設定してみてください。

— Madison Courto

3

こっちも一緒。パソコンでは再生できません。おそらく電話ブラウザの問題です。

— asprin

3

モバイルブラウザの問題

— louie kim

3

これは特定のブラウザ/オペレーティングシステム/デバイスの問題のようです。これはおそらく、ハックを使用してのみこれを「修正」できることを意味します。または、これらのブラウザ/オペレーティングシステム/デバイスの開発者にバグを修正するよう提案する。

— Daan

2

これらのdivはすべて同じ背景を持っているので、代わりに親要素に背景色を配置することはできませんか？

— Moob

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>

スニペットを展開

また、モバイルやPCでも見栄えがします。divSの高さは変更されません。残り300pxます。

— キチ・ビシロ
ソース

5

これはページのスケールによるものだと思います。このメタタグをヘッドに追加してみてください。

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

— アレックス
ソース

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のスタイルをtable、table-cellタイプ、またはflexboxcssを使用するタイプに変更する

— ガネーシュクマールK
ソース

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>

スニペットを展開

— テマニ・アフィフ
ソース

機能しません

— Nguyen You

@nguyenYou 1px試してみても？

— Temani Afif

1

うん！しかし、アウトラインの幅を35pxに増やすと、何か面白いことがわかりました。奇妙なギャップがたくさん現れます。

— Nguyen You

1

上部と中央のdivにmargin-bottomを追加してみてください。

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

スニペットを展開

お役に立てれば。

— アラバカシュ
ソース

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
ソース