相关疑难解决方法(0)

当我点击链接时,大多数浏览器会在它周围画一个虚线框.最简单的方法是查看链接是否在新窗口中打开,因为原始页面会粘在一起.

这可以停止吗？

在Firefox(当前版本14.0.1)中<area>,我在这里创建了一些标签(http://mediabrands.com.au/).我不仅看到了虚线,而且一旦它出现了我就无法摆脱它(例如通过点击另一个区域).

我在这里和谷歌搜索了相当长的时间,但仍未设法摆脱它们.它们不会出现在任何其他浏览器中.

我尝试过的事情(以及下面的所有组合)没有成功:

• 添加outline: none到IMG,地图和区域标签(和它们的:focus和:active)同行.
• 添加border: none到每个.
• 添加hidefocus="hidefocus"到每个.
• 使用::-moz-focus-inner{ border: none; outline: none; }这些元素中的每一个添加了各种组合.
• .focus(function(){ $(this).blur(); })为每个人添加了(jQuery).

我相信我已经用尽了所有能够遇到的信息 - 还有其他方法可以摆脱这些线路吗？

这是用于快速参考的HTML,并且因为我无法摆脱它的原因的可能性:

<img src="anatomy/dial/components/foundation.png" id="dial-map" usemap="#dial" />
<map name="dial">
    <area title="Ansible" class="tab" id="click-ansible" shape="poly" coords="412,419,376,447,313,474,248,487,247,434,327,415,374,377" href="#">
    <area title="Cadreon" class="tab" id="click-cadreon" shape="poly" coords="487,245,478,313,455,366,416,417,378,380,429,299,434,246" href="#">
    <area title="Orion" class="tab" id="click-orion" shape="poly" coords="418,73,453,117,482,191,484,242,431,244,422,180,378,111" href="#">
    <area title="Ensemble" class="tab" id="click-ensemble" shape="poly" coords="247,1,311,10,368,35,415,70,378,108,312,66,244,53" href="#">
    <area title="Reprise" class="tab" …

type="button"我的页面上有这个输入按钮 ( )：

当我点击它时，周围有一个恼人的焦点矩形：

我怎样才能删除它？

这是我的代码：

/*Buttons/Inputs*/
                    
.runInput {
   border-top: 1px solid #ffffff;
   background: #001cbd;
   background: -webkit-gradient(linear, left top, left bottom, from(#148bfa), to(#001cbd));
   background: -webkit-linear-gradient(top, #148bfa, #001cbd);
   background: -moz-linear-gradient(top, #148bfa, #001cbd);
   padding: 6.5px 13px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 24px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.runInput:hover {
   background: #001cbd;
   color: #d9d9d9; …

这是我在设备上屏幕录制的 gif，您可以在其中看到我正在谈论的蓝色框填充：

我尝试这样做：

* {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
};

button, 
button:active, 
button:focus {
  outline: none;
};

但它并不能解决消除蓝色框填充的问题，因为它并不是真正的焦点边框或outline.

我有一个 div，当点击它时，它里面的按钮会在它周围创建一个轮廓，如下所示：

**代码： **

.slide-arrow {
  color: #fff;
  background-color: #9E9997;
  border: none;
  padding: 16px 10px 17px 10px;
  font-size: 25px;
  opacity: 0.5;
  outline: 0;
}

.slide-arrow-right {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  margin-right: -1px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.slide-arrow-left {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0%, -50%);
  -ms-transform: translate(-0%, -50%);
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

.slide-arrow:hover {
  opacity: 0.7;
}

.slide-arrow:active {
  background-color: #D47C7C;
}

.slide-arrow i {
  font-size: 32px;
  outline: …