La position du haut de l'élément Html varie selon la résolution et le ratio des pixels de l'appareil.

Question

J'ai besoin de positionner le 2ème élément à côté du premier élément. Donc, je définis la valeur supérieure à 100%. le point de départ du 2ème élément varie lorsque le rapport des pixels du périphérique est de 1,5.

Machine: Lenovo YOGA 500, Echelle: 150%, Résolution: 1920 * 1080, Navigateur: Sauf 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>

ce problème se produit uniquement lorsque le rapport de pixels de dispositif 1.5.

la position de départ élément de classe flèche varie en fonction de ratio.i de dispositif de pixel devez retirer haut de la frontière de l'élément rouge mis en évidence

me conduiras Veuillez toute solution à ce sujet?

Merci est d'avance

Answer 1

Certainement un problème intéressant. La seule façon que j'ai pu enlever cette ligne supplémentaire était d'avoir un autre, légèrement plus petite boîte de div à l'intérieur de la flèche:

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