3 div具有相同的CSS，但高度不同

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中，它应以相等的高度显示这些divs。但可能会因屏幕尺寸而异。

运行以下代码段，然后尝试zoom-in屏幕，您将在某些时候看到这些divs具有相等的height。但是在另一个缩放级别，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>

Answer 2

高度不能以十进制表示。某些浏览器会对其进行隐蔽处理，但四舍五入时，所有浏览器都会采用不同的策略。因此，请使用整数。 here

也有详细的说明

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

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

Answer 3

发生这种情况是因为1.5px很小，无法显示在屏幕上。设为2px。

span div {
    background: #262626;
    height: 2px; /* changed to 2px */
    width: 20px;
    margin-top: 6px;
    border-radius: 15%;
}