如何清除背景色相同的三个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。但是，在某些移动设备上，它们在这三个div之间显示其他线条（或间隙）。

我的iPhone

在我的PC上，通过移动模式使用Chrome浏览器

有人知道这是怎么回事吗？任何关于它如何发生以及如何解决它的想法都将不胜感激。

html css

— 阮你
source

3

你为什么有保证金0？我无法复制，也许尝试将每个div的边距设置为-1px。

— 麦迪逊考特

3

同样在这里。无法在PC上复制。可能是手机浏览器问题。

— 阿斯普林

3

移动浏览器的问题可能是

— louie kim

3

某些浏览器/操作系统/设备似乎存在此问题。这可能意味着您只能使用黑客来“修复”此问题。或建议这些浏览器/操作系统/设备的开发人员修复该错误。

— 大安

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上看起来也不错。在div身高不会改变。它仍然存在300px。

— 奇西·维兹洛（KicsiViziló）
source

5

我想这是由于页面的规模。尝试将此meta标签添加到头部：

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

— 亚历克斯
source

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>

— 拉霍斯·阿帕德（Lajos Arpad）
source

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

— 里特什·坎德卡（Ritesh Khandekar）
source

2

这样做的原因问题可能是由于方式display block，inline-block不同的浏览器在不同屏幕上处理样式不同。

例如，inline-block元素将在右侧具有一个自动小空间。人们通常用消极的方法解决这个问题margin-left。

默认情况下，a div是block级别元素。

您所面临的底部空间也可能是因为处理块级元素的方式。

就像inline-block用负数解决空间margin-left，

这个block水平空间可以使用

负 margin-top或
将div样式更改为table，table-cell或者flexbox使用css键入

— Ganeshkumar K
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>

展开摘要

— 乌梅尔
source

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>

展开摘要

— Temani Afif
source

它不起作用

— Nguyen You

@NguyenYou即使尝试1px？

— Temani Afif

1

对！但是，当将轮廓宽度增加到35px时，我发现了一些非常有趣的东西。一堆怪异的间隙出现了。

— Nguyen You

1

只需尝试将margin-bottom添加到顶部和中间div。

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

展开摘要

希望这可以帮助。

— 阿拉巴卡什
source

1

使用显示和底边空白来修复样式。

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

— 乌梅尔
source

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>

展开摘要

— 乌梅尔
source