当在HTML页面上的div中嵌套div时，背景色的位置看起来不合适_Html_Css_Google Chrome

当在HTML页面上的div中嵌套div时，背景色的位置看起来不合适

html css google-chrome

当在HTML页面上的div中嵌套div时，背景色的位置看起来不合适,html,css,google-chrome,Html,Css,Google Chrome,我试图创造一种效果，我有一个高边框的div，里面有3个大小相等的div，每个内部div有自己的背景色我以为css的“数学”很容易做到这一点，但我的结果看起来是错误的 <html> <head> <style> #main { height: 156px; width: 52px; background: #CECECE; border: 4px solid gray;

我试图创造一种效果，我有一个高边框的div，里面有3个大小相等的div，每个内部div有自己的背景色

我以为css的“数学”很容易做到这一点，但我的结果看起来是错误的

<html>
  <head>
    <style>
      #main {
        height: 156px;
        width: 52px;
        background: #CECECE;
        border: 4px solid gray;
        border-radius: 4px;  
      }

      .inner {
        width: 52px;
        height: 52px;
      }

      #i1 {
        background: green;
      }

      #i2 {
        background: red;
      }

      #i3 {
        background: blue;
      }
    </style>
  </head>

  <body>
    <div id='main'>
      <div id='i1' class='inner'></div>
      <div id='i2' class='inner'></div>
      <div id='i3' class='inner'></div>
    </div>
  </body>
</html>


#主要{
高度：156px；
宽度：52px；
背景:#塞切奇；
边框：4倍纯色灰色；
边界半径：4px；
}
.内部{
宽度：52px；
高度：52px；
}
#i1{
背景：绿色；
}
#i2{
背景：红色；
}
#i3{
背景：蓝色；
}

有人知道为什么我的主要部门的部分背景显示在其边界内，以及我如何修复它吗

如果您的浏览器呈现小提琴的方式与我的不同（我使用的是Chrome），我会看到以下内容（我的问题是，从主div背景的内侧顶部、边框的左侧和右侧显示浅灰色）：

我很确定您的缩放级别不是100%。左边是你的图像截图，中间是我的Chrome如何在100%上渲染，右边是我的Chrome在80%上渲染。我似乎无法再现您的精确缩放级别，但正如您所见，类似的问题在不同的缩放级别上出现

我将简化CSS：从

#main

中删除

高度设置，从内部删除宽度设置。这样，内部div将填满#main
的整个宽度，而#main
将从其内容中获得其高度-三个内部div

#主{
宽度：52px；
背景:#塞切奇；
边框：4倍纯色灰色；
边界半径：4px；
}
.内部{
高度：52px；
}
#i1{
背景：绿色；
}
#i2{
背景：红色；
}
#i3{
背景：蓝色；
}

在my broswer（chrome）中正确显示没有像您图像中那样的内部边框，这让我觉得我的chrome安装可能有问题。我唯一能想到的就是试着重新安装它。经过检查，它是100%。在100以上和100以下的各种缩放级别上，背景要么看起来正确，要么我遇到了一个“不同”的问题，有点像您包含的最右边的图像。再次让我觉得我安装的Chrome有问题。好吧，这是我最好的猜测，你可以检查一下是否有任何问题chrome://flags/ 在重新安装之前正在使用扳手……是的，偏离路线了！：）愚蠢的我应该注意到这是一个潜在的原因+1.