백분율 너비 요소에 div 오버레이 정렬

Question

액체 4 열 레이아웃의 "직원"페이지를 작성하고 있습니다. 각 직원의 사진 위에 절대적으로 배치 된 div 요소를 배치하여 버튼/링크 역할을합니다. 내 문제는이 오버레이 div 아래쪽으로 정렬 할 때 : 0 및 오른쪽 : 0 창 크기를 조정할 때 이미지와 오버레이 사이의 가끔 1 픽셀 간격을 얻을 것이다. 이것이 일종의 반올림 오류의 함수 인 것 같습니다.

이 사이트와 다른 사람들에게 도움을 요청했지만이 문제는 어디서나 명시 적으로 논의되지 않았습니다. 어떤 통찰력이라도 대단히 감사하겠습니다.

문제의 페이지는 여기에서 볼 수있다 : communicationdesign.com/cwt-beta/about.html

가 가끔 오류/차이를 확인하기 위해 창 크기를 조정 ... 여기

는 관련 마크 업입니다 :

<div class="staff-block"> 
    <div class="staff-photo"> 
     <a href="gruber.html"><img src="img/gruber.jpg" class="portrait" /></a> 
     <a href="gruber.html"> 
      <div class="plus-link"> 
       <div class="plus-sign">&#43;</div> 
      </div> 
     </a> 
    </div> 
    <div class="caption"> 
     <a href="gruber.html">Drew Gruber</a><br /><span class="job-title">Executive Director</span> 
    </div> 
</div> 

그리고 CSS는 다음과 같습니다.

.staff-block { 
    position: relative; 
    width: 22.3%; 
    float: left; 
    background-color: #ffc; 
    margin-right: 3.5%; 
} 
.staff-photo{ 
    position: relative; 
} 
.staff-photo img, .board-photo img, .bio-photo img { 
    width: 100%; 
} 
.portrait { 
    opacity: 1; 
    display: block; 
    width: 100%; 
    height: auto; 
    transition: .5s ease; 
    backface-visibility: hidden; 
} 
.plus-link { 
    transition: .5s ease; 
    opacity: 1; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 
.plus-sign { 
    background-color: rgba(255,204,78,0.8); 
    color: white; 
    font-size: 40px; 
    line-height: 30px; 
    padding: 4px 8px 6px; 
} 

Answer 1

이것은 백분율을 사용할 때 산업 재해입니다. 다음과 같은 해킹을 사용할 수 있습니다.

.staff-photo{ 
    overflow: hidden; 
} 

.plus-link { 
    background-color: rgba(255,204,78,0.8); // color on the plus sign parent 
    position: absolute; 
    bottom: -5px; // position it over the edge 
    right: -5px; 
    padding: 0 5px 5px 0; // and correct the extra space 
} 

.plus-sign { 
    background-color: transparent; // or remove bg color 
}