Border wird breiter, wenn es mit übersetzen

Ich möchte eine vertikale Linie, die immer in der Mitte des Div-Container bleibt, unabhängig von der Bildschirmgröße, und ich möchte auch, dass es 1px dünn sein. Aber wenn ich transformiere: translate(-50%, -50%);, ich weiß nicht warum, aber meine Grenze wird dicker dann habe ich erwartet. Dies ist mein HTML/CSS-Code.Border wird breiter, wenn es mit übersetzen

.cases-container { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    background-color: black; 
 
    width: 480px; 
 
    height: 110px; 
 
    position: relative; 
 
} 
 
.item-border { 
 
    border-left: 1px solid #ff5a00; 
 
    height: 95px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%);

<div class="cases-container"> 
 
     
 
    <div class="item-border"></div> 
 
    
 
</div>

Also, was ist das hier Thema?

Quelle

2017-11-14 Nemus

Ich scheine Ihr Beispiel einfach gut zu sehen, aber dies könnte zu tun haben, mit der Tatsache, dass es kein mittleres Pixel in einem 480px breiten div gibt. Versuchen Sie, es 481px breit zu machen, sehen Sie, ob das etwas ändert. Verschiedene Browser haben unterschiedliche Möglichkeiten, mit solchen Situationen umzugehen, mit halben Pixeln usw. –

Hier ist der aktualisierte Code für Ihre Referenz:

Liste item

.cases-container { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    background-color: black; 
 
    width: 480px; 
 
    height: 110px; 
 
    position: relative; 
 
} 
 
.item-border { 
 
    border-left: 1px solid #ff5a00; 
 
    height: 95px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateY(-50%);

<div class="cases-container"> 
 
     
 
    <div class="item-border"></div> 
 
    
 
</div>

Quelle

2017-11-14 12:38:03

Border wird breiter, wenn es mit übersetzen

Antwort

Verwandte Themen