时间戳

首页 > 解决方案 > 用 2px 高度渲染的 1px 高度的线条

html - 用 2px 高度渲染的 1px 高度的线条

问题描述

我生成了许多简单的 DIV 行，它们一一对应，高度为 1px，宽度不同，在 JS 中会发生变化。但由于某种原因，许多行的高度为 2px。将高度更改为 2px 后，不同行的高度等于 3px。

在所有常见浏览器和任何浏览器缩放中重现此问题。

.item_volume {
  height: 1px;
  background: red;
}
<div class="item_volume" style="width:10px"></div>
<div class="item_volume" style="width:20px"></div>
<div class="item_volume" style="width:30px"></div>
<div class="item_volume" style="width:40px"></div>
<div class="item_volume" style="width:50px"></div>
<div class="item_volume" style="width:60px"></div>
<div class="item_volume" style="width:70px"></div>
<div class="item_volume" style="width:80px"></div>
<div class="item_volume" style="width:90px"></div>
<div class="item_volume" style="width:100px"></div>
<div class="item_volume" style="width:110px"></div>

标签： htmlcss

解决方案

我发现了问题。浏览器缩放设置为 100%，但 Windows 首选项屏幕大小为 150%

推荐阅读