0

我现在正在处理一个包含两个按钮的页面。这些按钮是一个跨度的组合，带有按钮标题，被两个半圆的图像包围：

<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/

4

3 回答 3

1

应该是边界吧。试试这个 CSS 规则来删除超链接的边框：

a {
    border: 0;
}
于 2012-11-20T18:11:23.360 回答
1

确保链接没有应用 CSS：

a{
    text-decoration:none;
}
a img{
    border:0;
}
于 2012-11-20T18:22:02.283 回答
1

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

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

默认情况下，图像是内联的。并避免使用内联样式！:)

于 2012-11-20T19:08:59.343 回答