Html 元素顶部位置因高分辨率和设备像素比而异

Question

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

机器：联想 YOGA 500， 比例：150%， 分辨率：1920 * 1080， 浏览器：Firefox 除外

.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;
}