html - CSS百分比得到错误的值/未对齐的嵌套div

问题描述

上面显示的复选框有两个问题。应用于父子的样式本质上是：

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 24px;
   height: 24px;
   outline: 1px solid black;
   margin-right: 0.5em;
}

.child {
   width: 80%;
   height: 80%;
   flex: none;
   background-color: red;
}

第一个问题是：当我通过读取孩子的宽度时getBoundingClientRect().width，它显示为 19.1875，而它应该是 24 * 80% = 19.2。

其次，如何让孩子方死角？我不知道为什么，但它们都略微向左和顶部。旁注：在这种情况下，父母和孩子都是<div>元素。

编辑：

const child = document.querySelector('.child')
console.log(child.getBoundingClientRect().width)

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 50px;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  outline: 1px solid black;
  margin: 1em;
  font-size: 1.5em;
}

.child {
  width: 80%;
  height: 80%;
  flex: none;
  background-color: red;
}

<div class='parent-container'>
  <div class='parent'>
    <div class='child'>
    </div>
  </div>
  <div class='parent'>
    <div class='child'>
    </div>
  </div>
  <div class='parent'>
    <div class='child'>
    </div>
  </div>
  <div class='parent'>
    <div class='child'>
    </div>
  </div>
</div>

<h1> H1 ELEMENT </h1>

<div class='parent-container'>
  <div class='parent'>
    <div class='child'>
    </div>
  </div>
  <div class='parent'>
    <div class='child'>
    </div>
  </div>
  <div class='parent'>
    <div class='child'>
    </div>
  </div>
  <div class='parent'>
    <div class='child'>
    </div>
  </div>
</div>

上面的代码片段是我复制问题的最大努力。首先，子 div 宽度的记录值似乎不正确（19.1875 而不是 19.2），尽管它实际上可能不会影响它们的外观。

其次，正如我所发现的，只有当附近的元素影响其位置时，子组件才会错位。如代码段所示，上方复选框行中的子元素<h1>完全居中。但是它下面的孩子div比底部更接近顶部。虽然它可能看起来并不明显，但当它们按比例放大时会变得非常明显，就像顶部的照片一样。

这在大多数浏览器中都可以观察到，尽管在 Firefox 中这种效果实际上是相反的（更接近底部而不是顶部）。我能做些什么来防止这种行为吗？

标签： htmlcss

我缺乏关于不同浏览器如何处理亚像素舍入和渲染的深入知识。但在这种情况下，margin 和其他属性表示em或%可能导致元素在不一致的位置呈现（因为我们可能正在处理像素的一小部分，同时仍然受到屏幕实际像素的限制）。

我不知道这个问题的一般解决方案，但你可以简单地确保父母和孩子之间的宽度和高度的差异可以被 2 整除。然后这种差异可以在左/右和上/下之间均匀分布. 在您的情况下，您可以例如尝试：

.child {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background-color: red;
}

html - CSS百分比得到错误的值/未对齐的嵌套div

问题描述

解决方案

推荐阅读