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

Question

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

机器：联想YOGA 500， 规模：150％， 分辨率：1920 * 1080， 浏览器：Firefox除外

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

仅当设备像素比为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;
}