1px <hr> görünümü neden değişiyor?

Question

Ben bu konuda benim aklımda bitiyorum. Chrome'da cetvel kalınlığı, metnin kaç satırının altına bağlı olarak değişir. Firefox ve IE'de her zaman 1px kalır. Aşağıdaki Görüntü ve burada bir keman (sorunu görmek için Chrome ile ziyaret) 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

Ben sabit yüksekliği ile bir ilgisi vardır inanıyorum ana kaplar. Ben bir düzeltme var:

.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>

Ben sadece .pc-task sınıfa bir line-height: 16px; ekledik.

Güncelleme keman: https://jsfiddle.net/Lh4qg7zc/3/

DÜZENLEME - Ben Aşağıdaki örnek keman çıkarıldı ve yerine dolgu kullandım gibi, gerçekten de siz veliler koyduk sabit yüksekliği ile ilgili bir şey olduğunu: https://jsfiddle.net/Lh4qg7zc/4/

Gördüğünüz gibi, hr'lar aynı şeyi görüntüler.