时间戳

首页 > 解决方案 > 3个具有相同css的div，但它们的高度不同

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

问题描述

看看这张照片 我的意思是制作像左窗这样的东西，但它最终就像你在右图中看到的那样。3个具有相同css代码的div，但它们的高度不同。

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

标签： htmlcss

解决方案

您在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将显示不相等的高度。

更多信息：CSS 中的子像素问题 

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

推荐阅读