Question

我正在处理一个包含两个按钮的页面。按钮是一个跨度和按钮标题的组合，由两个半圆的图像包围：

<td align="right">
<a href="#" title="Reset" onclick="resetForm();">
        <img src="images/btnBlueL.gif"><span style="background-image:url('images/btnBlueM.gif');color:white;font-weight:bold;height:22px;vertical-align:top;text-align:center;padding-top:5px;text-decoration:none;cursor:pointer;display:inline-block;">
         Reset
         </span><img src="images/btnBlueR.gif">
    </a>

     <a href="#" title="Clear all fields" onclick="clearForm()">
         <img src="images/btnBlueL.gif"><span style="background-image:url('images/btnBlueM.gif');color:white;font-weight:bold;height:22px;vertical-align:top;text-align:center;padding-top:5px;text-decoration:none;cursor:pointer;display:inline-block;">
          Clear
         </span><img src="images/btnBlueR.gif">
      </a>

当我将鼠标悬停在按钮上时，按钮右下方会出现一条非常小的红线。这适用于所有浏览器。看起来它部分突出显示“a”元素，但仅限于几个像素。有没有人见过这样的东西？你是怎么让它消失的？

http://jsfiddle.net/jmlane/VHFwB/

Answer 1

这可能是一个边界。尝试使用此CSS规则从超链接中删除边框：

a {
    border: 0;
}

Answer 2

确保链接没有应用CSS：

a{
    text-decoration:none;
}
a img{
    border:0;
}

Answer 3

有时会添加不必要的边框，所以我在CSS中使用以下几行：

a { border: 0; }
img { border: 0; display: block; }

默认情况下，图片是内联的。并避免使用内联样式！：）

为什么在悬停时该元素会被部分突出显示？

3 个答案: