css - Why does the 1px <hr> appearance change? -

i @ wits end on one. in chrome, ruler thickness changes depending on how many lines of text underneath. in firefox , ie remains 1px. image below , here fiddle (visit chrome see problem) 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 ... , 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; } 

i believe has fixed height of parent containers. i've got fix:

.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 ... , line...</div>      </div></div>

i've added line-height: 16px; .pc-task class.

updated fiddle: https://jsfiddle.net/lh4qg7zc/3/

edit - indeed fixed height you've put on parents, i've removed in following example fiddle , used padding instead: https://jsfiddle.net/lh4qg7zc/4/

as can see, hr's display same.