Question

我正在处理有non-profit site的新闻信息页面。我使用缩略图照片作为较大图像的链接供下载。

对于缩略图，我将边框设置为处于关闭状态的4px白色，然后在悬停状态下设置为4px灰色。我在Safari中工作得很好，但在悬停状态下在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>

这是CSS：

#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; 
            }

问题是：如何让边框在FF中正确排列？

感谢。

Answer 1

img { border:0px; }

所有缩略图都有边框，这就是取代它们的原因。

Answer 2

这是因为a标记的宽度和高度低于img size。

为什么Firefox中的图像边框偏移？

2 个答案: