Warum ändert sich die 1px <hr> Erscheinung?

Question

Ich bin mit meinem Verstand auf dieses Ende. In Chrome ändert sich die Stärke des Lineals abhängig davon, wie viele Textzeilen darunter liegen. In Firefox und IE bleibt es immer 1px. Bild unten und hier eine Geige (Besuch mit Chrome, das Problem zu sehen) https://jsfiddle.net/Lh4qg7zc/

<div class="project-card"> 
    <div class="project-caption"> 
     <div class="pc-name">beloved homes</div> 
     <hr class="project-caption-ruler"> 
     <div class="pc-type">Book</div> 
     <div class="pc-task">International editing, verbal identity, copy adaptation</div> 
    </div> 
</div> 

<div class="project-card">  
    <div class="project-caption"> 
     <div class="pc-name">beloved homes</div> 
     <hr class="project-caption-ruler"> 
     <div class="pc-type">Book</div> 
     <div class="pc-task">International editing, verbal identity, copy adaptation ... and an extra line...</div> 
    </div> 
</div> 

CSS:

.project-card { 
    position: relative; 
    background-color:brown; 
    text-align: center; 
    width: 380px; 
    height: 250px; 
    margin-bottom: 2%; 
} 

.project-caption { 
    color: white; 
    font-size: 0.8rem; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 90%; 
} 

.pc-name { 
    text-transform: uppercase; 
    padding-bottom: 5px; 
} 

.project-caption-ruler { 
    width: 166px; 
    border:0; 
    border-top:1px solid white; 
} 

.pc-type, 
.pc-task { 
    font-style: italic; 
} 

.pc-task { 
    margin-top: 3px; 
} 

Answer 1

Ich glaube, es hat etwas mit der festen Höhe zu tun hat, von die übergeordneten Container. Ich habe ein Update bekommen:

.project-card { 
 
    position: relative; 
 
    background-color:brown; 
 
    text-align: center; 
 
    width: 380px; 
 
    height: 250px; 
 
    margin-bottom: 2%; 
 
} 
 

 
.project-caption { 
 
    color: white; 
 
    font-size: 0.8rem; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 90%; 
 
} 
 

 
.pc-name { 
 
    text-transform: uppercase; 
 
    padding-bottom: 5px; 
 
} 
 

 
.project-caption-ruler { 
 
    width: 166px; 
 
    border: none; 
 
    border-top:1px solid white; 
 
} 
 

 
.pc-type, 
 
.pc-task { 
 
    font-style: italic; 
 
} 
 

 
.pc-task { 
 
    margin-top: 3px; 
 
    line-height: 16px; 
 
}

<div class="project-card"> 
 
<div class="project-caption"> 
 
     <div class="pc-name">beloved homes</div> 
 
     <hr class="project-caption-ruler"> 
 
     <div class="pc-type">Book</div> 
 
     <div class="pc-task">International editing, verbal identity, copy adaptation</div> 
 
    </div></div> 
 
    
 
<div class="project-card">  
 
    <div class="project-caption"> 
 
     <div class="pc-name">beloved homes</div> 
 
     <hr class="project-caption-ruler"> 
 
     <div class="pc-type">Book</div> 
 
     <div class="pc-task">International editing, verbal identity, copy adaptation ... and an extra line...</div> 
 
    </div></div>

Ich habe einfach eine line-height: 16px; zu Ihrer .pc-task Klasse hinzugefügt.

Aktualisiert Geige: https://jsfiddle.net/Lh4qg7zc/3/

EDIT - Es ist in der Tat etwas mit der festen Höhe Sie auf die Eltern gesetzt haben zu tun, wie ich stattdessen im folgenden Beispiel Geige und verwendet Polsterung entfernt haben: https://jsfiddle.net/Lh4qg7zc/4/

Wie Sie sehen können, zeigt das hr das gleiche an.