如何删除带有背景图像的链接中的丑陋边框？答案

【问题标题】：How to remove that ugly border in my link with a background image?如何删除带有背景图像的链接中的丑陋边框？
【发布时间】：2011-07-01 22:32:31
【问题描述】：

我正在制作带有背景图像的导航菜单。我设法用文本缩进消失了文本，但是在单击链接时它显示了一个非常难看的边框。我如何摆脱边界？我的CSS如下所示；

       #menu{
  width:670px;
  float:right;
      }

    #menu ul{
    padding-top:10px;
     }
      #menu ul li{
        list-style-type:none;
     display: block;
      float:left;
    width:163px;
     height:270px;
     }

   #menu ul li a{
   height:270px;
    display: block;
    width:163px;
    text-indent:-9999px;
    border:none;
      }
     .box_1{
      background: url(images/box_1.png) no-repeat;
      width:163px;
     height:268px;
     border:none;
     }

     .box_2{
    background: url(images/box_2.png) no-repeat;
    width:163px;
    height:268px;
    border:none;
       }

    .box_3{
     background: url(images/box_3.png) no-repeat;
     width:163px;
    height:268px;
    border:none;
     }

     .box_4{
     background: url(images/box_4.png) no-repeat;
     width:163px;
     height:268px;
     border:none;
     }

还有我的html：

<div id="menu">
<ul>
<li><a class="box_1" href="#">creative solutions</a></li>
 <li><a class="box_2" href="#">dynamic development</a></li>
 <li><a href="#" class="box_3">unlimited opportunities</a></li>
 <li><a  class="box_4" href=#">exceptional approach</a></li></ul>
 </div>

提前感谢您的帮助！

【问题讨论】：

呃，请不要删除它。这就是我知道特定链接当前具有焦点的方式。
umm...它出现在整个屏幕上，看起来很糟糕！对不起！
我认为是否删除有两种情况：（1）如果是点击网站logo，进入网站首页，用户点击“返回”，那么徽标可以有虚线轮廓并且看起来很难看，在这种情况下可以考虑将其删除。（2）如果是一长串的item，确实如此，我确实希望看到我之前点击的内容，所以作为一个用户，我宁愿它留下来。

标签： html css image border hyperlink

【解决方案1】：

虚线的东西？

a {outline:0}

【讨论】：

嗨，是的，虚线的东西。我尝试设置轮廓，但不起作用！

【解决方案2】：

你是说虚线轮廓？像这样删除它：

a {
   outline: 0;
}

您可能想要添加另一种焦点样式。见here。

【讨论】：

你的意思是它不工作？你不是在谈论img边界是吗？ img {边框：无； }
不，当然不是。我说的是链接有焦点时它得到的边界。设置大纲不起作用，但是当我将 a:active 设置为 border:none. 时，它起作用了！
设置 a:active { outline:0; 是否也有效？ } ?也许我们在谈论不同的边界。

【解决方案3】：

应用另一种 css 样式：

#menu ul li a:active {
    border:none;
}

【讨论】：

@Snowbell92 - 太棒了 :) 不要忘记单击复选标记来识别它。我看到您还有一些其他问题尚未确定答案，很快它就会在您发布问题时显示您的接受度。

【解决方案4】：

您可能正在谈论当元素（在您的情况下为图像）获得焦点（通过单击或按 Tab）时显示的丑陋虚线边框。

使用css属性：

outline: none;

【讨论】：

【解决方案5】：

在你的 css 文件顶部试试这一行，

* :focus { outline: 0; }

【讨论】：