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