Podczas określania dolnego obramowania 1px dla tytułu w polu, które jest ustawione absolutnie, a wysokość ramki jest określana na podstawie procentowej wartości, na ekran nie-siatkówkowy będzie wyglądał jak 2 px, podczas gdy na ekranie siatkówki wyświetla granicę 1px zgodnie z opisem. Ten błąd renderowania pojawia się tylko w Safari i Chrome. Niestety nie próbowałem tego na IE.css Obramowanie 1px jest grubsze na monitorach o niskiej gęstości (siatkówka) z chromem i safari
<div class="container">
<div class="box">
<div class="title">box</div>
</div>
</div>
.container {
width: 100%;
height: 100%;
}
.box {
width: 100px;
height: 25%;
position: absolute;
top: 50px;
left: 50px;
border: 1px solid black;
-webkit-transform: translate(0, 50%);
-ms-transform: translate(0, 50%);
transform: translate(0, 50%);
}
.title {
border-bottom: 1px solid blue;
margin: 5px;
height: 20px;
}
Sprawdź mój jsfiddle. Spróbuj również zmienić rozmiar okna przeglądarki, a obramowanie w polu-3 zmieni się:
Pole-1 jest ustawione absolutnie, wysokość pola określona w pikselach.
Box-2 jest umieszczony absolutnie, wysokość pudełka określona w pikselach, przetłumaczona na -50% w kierunku y.
Box-3 jest pozycjonowany absolutnie, wysokość pudełka określona w procentach, przetłumaczona na -50% w kierunku y.