javascript - HTML 元素的顶部位置因高分辨率和设备像素比而异

Question

我需要将第二个元素定位在第一个元素的旁边。所以我将最高值设置为 100%。当设备像素比为 1.5 时，第二个元素的起点会发生变化。

机器:联想 YOGA 500， 规模:150%， 分辨率:1920*1080， 浏览器:火狐除外

.wrap {
    background-color: #fff;
    border: 1px solid #ef36d8;
    position: absolute;
    top: 70px;
}

.content {
    width: 100px;
    height: 100%;
    padding: 5px;
}

div {
    box-sizing: border-box;
}

.arrow {
    position: absolute;
    width: 16px;
    height: 8px;
    left: 50px;
    top: 100%;
    background-color: #fff;
    border: 1px solid #ef36d8;
    border-top: 1px solid #fff;
}

<div class="wrap">
  <div class="content">Content area</div>
  <div class="arrow"></div>
</div>

此问题仅在设备像素比为 1.5 时出现。

箭头类元素的起始位置根据设备像素比率而变化。我需要删除红色突出显示元素的边框顶部

请指导我解决这个问题？

提前致谢

Answer 1

绝对是一个有趣的问题。我能够删除该额外行的唯一方法是在箭头内添加另一个稍小的 div 框:

HTML

<div class="wrap">
  <div class="content">Content area</div>
  <div class="arrow"></div>
  <div class="secondary-arrow"></div>
</div>

CSS

.wrap {
    background-color: #fff;
    border: 1px solid #ef36d8;
    position: absolute;
    top: 70px;
}

.content {
    width: 100px;
    height: 100%;
    padding: 5px;
}

div {
    box-sizing: border-box;
}

.arrow {
    position: absolute;
    width: 16px;
    height: 8px;
    left: 50px;
    top: 100%;
    background-color: #fff;
    border: 1px solid #ef36d8;
    border-top: 1px solid #fff;
}

.secondary-arrow {
    position: absolute;
    width: 14px;
    height: 7px;
    left: 51px;
    top: 100%;
    background-color: #fff;
}