divのオーバーレイをパーセンテージ幅の要素に合わせる

Question

私は液体の4列レイアウトの「スタッフ」ページを作成しています。私はボタン/リンクとして機能するために、各スタッフの写真の上に絶対に配置されたdiv要素を配置しました。私の問題は、私がこのオーバーレイdivをbottom：0とright：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 
}