Почему меняется вид 1px <hr>?

Question

Я нахожусь на своем конце ума на этом. В Chrome толщина линейки изменяется в зависимости от того, сколько строк текста находится под ней. В Firefox и IE он всегда остается 1px. Изображение ниже, и здесь скрипку (посещение с Chrome, чтобы увидеть проблему) 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

Я считаю, что это что-то делать с фиксированной высотой родительские контейнеры. У меня есть исправление:

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

Я просто добавил line-height: 16px; к вашему .pc-task класса.

Обновлено скрипка: https://jsfiddle.net/Lh4qg7zc/3/

EDIT - это действительно что-то делать с фиксированной высотой вы вложили на родителях, так как я удалил в следующем примере скрипке и использовать отступы вместо: https://jsfiddle.net/Lh4qg7zc/4/

Как вы можете видеть, дисплей hr тот же.