html - 3个具有相同CSS的div，但它们的高度不同

Question

我的意思是做一些像左窗一样的东西，但结果就像你在右图中看到的那样。 3 个 div，具有相同的 css 代码，但高度不同。

span div {
    background: #262626;
    height: 1.5px;
    width: 20px;
    margin-top: 6px;
    border-radius: 15%;
}

<span>
    <div></div>
    <div></div>
    <div></div>
</span>

Answer 1

您使用的是 px 单位的分数值作为高度。将其更改为整数值。它会起作用。

span div {
  background: #262626;
  height: 2px;
  width: 200px;
  margin-top: 6px;
  border-radius: 15%;
}

<span>
    <div></div>
    <div></div>
    <div></div>
</span>

更新

AFAIK 分数像素或子像素在不同的浏览器中被舍入或考虑不同。在 chrome 中，它应该以相同的高度显示这些 div。但它可能会因屏幕尺寸而异。

运行下面的代码片段并尝试放大屏幕，您会在某个时候看到这些div具有相同的高度。但在另一个缩放级别 divs 将以不等的高度显示。

更多信息:Sub-Pixel Problems in CSS

span div {
  background: #262626;
  height: 1.5px;
  width: 100px;
  margin-top: 6px;
  border-radius: 15%;
}

<span>
    <div></div>
    <div></div>
    <div></div>
</span>