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。

箭头类元素开始位置变化的基础上的设备像素ratio.i需要删除红色的边框顶部突出显示的元素

请指导我这个任何解决方案？

致谢提前

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