为什么Firefox中的图像边界偏移?

non-profit site 有新闻信息页。我使用缩略图作为链接到更大的图片下载。

对于缩略图,我在关闭状态下将边框设置为4px白色,然后在悬停状态下设置为4px灰色。我在Safari中工作得很好,但在hover状态下的Firefox中有点偏移。

以下是html:

<div id="press-photos">
  <a class="pic" href="_downloads/nativity-1-full.jpg"><img src="_images/nativity-1-thumb.jpg" alt="nativity-1-thumb"/></a>
  <a class="pic" href="_downloads/nativity-2-full.jpg"><img src="_images/nativity-2-thumb.jpg" alt="nativity-2-thumb"/></a>
  <a class="pic" href="_downloads/nativity-3-full.jpg"><img src="_images/nativity-3-thumb.jpg" alt="nativity-3-thumb"/></a>
  <a class="pic" href="_downloads/nativity-4-full.jpg"><img src="_images/nativity-4-thumb.jpg" alt="nativity-4-thumb"/></a>
</div>

#press-photos                       { clear: left; border: 1px solid #7c0924; background-color: #fff; } 
#press-photos a.pic:link,
#press-photos a.pic:visited {  
            width: 216px; 
            height: 145px; 
            margin: 20px; 
            display: block;
            border: 4px solid #fff; 
            text-decoration: none;
            color: transparent;
            }
#press-photos a.pic:hover,
#press-photos a.pic:active  { 
            width: 216px; 
            height: 145px; 
            margin: 20px;
            border: 4px solid #cbcbcb; 
            color: transparent; 
            }