三个同class的div设height为1px时高度不一致，是渲染问题吗？

这是Flex布局的小数像素分配导致的渲染问题，属于浏览器对非整数像素的近似渲染表现。

你的nav容器设置了固定高度3rem，并用justify-content: space-evenly垂直分布三个子元素。浏览器计算子元素间距时，会把容器剩余高度（总高度减去三个子元素总高度）平均分成两份。如果剩余高度无法被2整除，就会得到小数像素值——而浏览器处理小数像素时，会根据元素位置做不同的近似处理（比如向上/向下取整），最终导致三个子元素的实际垂直占用空间看起来不一致。尤其是当子元素本身只有1px/2px高时，这种间距的微小差异会被视觉放大，显得高度不一样。

当你把height改成3px后，要么剩余高度刚好能被2整除得到整数间距，要么子元素高度足够大，间距的小数差异占比极低，视觉上就看不出高度差别了。

解决方法 #

• 用gap替代justify-content：直接固定子元素间距，避免小数像素计算

nav {
  display: flex;
  flex-direction: column;
  height: 3rem;
  cursor: pointer;
  align-items: flex-end;
  gap: calc((3rem - 3px) / 2); /* 精确计算间距，也可直接写固定值比如1rem */
}

• 禁止子元素被压缩：给.menuLine添加flex-shrink: 0，确保高度严格按设置值渲染

.menuLine {
  width: 100%;
  height: 1px;
  background-color: #000000; /* 注意你原代码这里多了一个多余的")"，需删掉 */
  border-radius: 2px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

• 调整容器高度为可整除值：把nav的高度设置为「子元素总高度 + 2倍整数间距」，让间距计算结果为整数像素，避免近似问题。

内容的提问来源于stack exchange，提问作者Anand choudhary