2012-08-17 93 views
22

点击时,按钮和链接周围有边框。如何删除IE7中链接周围的虚线边框

enter image description here

enter image description here

任何人都可以帮我解决方案将其删除。

+5

这是重点标记。它告诉那些没有使用鼠标/轨迹球/等的人来浏览他们在文档中的位置。除非用更明显的东西替换它,否则不要移除它。 – Quentin 2012-08-17 14:17:31

+0

如果您告诉我们您到目前为止尝试过的方法以及为什么它不起作用,它会有所帮助。这样我们可以帮助你更好/更快! – Jeroen 2012-08-17 14:18:12

回答

6

它的丑陋,而且还有最IE修复。

a:focus, *:focus { 
    noFocusLine: expression(this.onFocus=this.blur()); 
} 
-10

您可以使用此代码做到这一点:

a:focus{ 
     border: none; 
    } 
+18

@maanu - 来吧,为什么接受这个答案?这甚至没有工作!您感兴趣的房产是大纲,而不是边界。在IE中试试这个:http://jsfiddle.net/dLVyK/10/ =仍然看到outline =不工作。 – darma 2012-08-17 18:29:00

+0

@Zendy我赞赏你的努力,但不幸的是你的灵魂不适合我。在windows xp上运行时遇到了一个IE问题,它只能通过这个hack代码修复:noFocusLine:xpression(this。onFocus = this.blur());'这就是为什么接受正确的答案 – Muhammed 2014-08-15 15:50:21

+0

@darma这是什么exactely帮助我作为解决方案http://www.cssjunction.com/css/remove-dotted-border-in-ie7/ – Muhammed 2014-08-15 15:51:41

3

这会做的伎俩

a { 
    outline:0; 
} 
49

您可以预设会这样:

:focus{ 
    outline:0; /*removes the dotted border*/ 
} 

但要记住(可访问性原因)来设定在您的CSS文件中将“稍后”样式设置为更明显的样式。例如:

a:focus, a:active{ 
    color:#ff5500; /*different color than regular*/ 
} 
input[type=submit]:focus, input[type=submit]:active{ 
    background-color:#444; /*different color than regular*/ 
} 
+1

你确定**可行吗?我做了一个简单的演示,焦点环仍然出现。 – Chris 2012-08-17 15:24:12

+2

是的,它*做*工作,看演示在这里:http://jsfiddle.net/dLVyK/7/我可以知道为什么downvote?这个解决方案非常好。 – darma 2012-08-17 15:50:33

+1

对不起,我真的很抱歉 - 我定义了一个错误的'DOCTYPE',因此规则不起作用。你能否编辑你的答案,以便我可以改变我的投票?我再次表示歉意。 – Chris 2012-08-17 16:01:32

2

尝试

a { 
    outline: none; 
} 

始终尝试使用CSS reset.This将帮助您解决问题就像this.I使用eric mayer css reset tool

+0

+0

什么是你的html代码? – NewUser 2012-08-17 14:47:00

+0

'<按钮类型= “按钮” 类= “blueBtn的”> 关闭' – Muhammed 2012-08-17 14:47:39

6

首先,我可以看到您的一个标签是IE7-bug,而这实际上更像是一个功能。使用这种虚线outline的目的是使用户能够使用鼠标滚轮或tab键在各种控件之间导航。

在任何情况下,要定义元素“聚焦”时的样式,请使用CSS :focus选择器。风格这个大纲的财产,一般,outline; outline: 0将防止焦点轮廓出现。

注:您可能希望应用该规则只在您的按钮,而不是在所有的元素,因为有些用户可能是看惯的东西来表示焦点,这使得它更容易使用上面提到的方法导航。

希望能以任何方式提供帮助。

+0

<按钮类型= '按钮'> 不起作用修复:) – Muhammed 2012-08-17 14:45:33

+2

@maanu这可能是因为你没有定义合适的“DOCTYPE”。 – Chris 2012-08-17 16:02:56

3

这也将工作

 
    a 
    { 
     outline-style:none; 
    } 
2

此规则应用于输入

input { outline : none ; } 
5

CSS outline不IE7支持。这种“浏览器”需要以下CSS表达式:

a { 
    _noFocusLine: expression(this.hideFocus=true); 
} 

它的工作原理也较新版本。

+0

谢谢你回答 – Muhammed 2014-03-05 22:02:32

3

a:link { outline-style:none; }`

+0

请不要简单地发布代码。提供一些关于您的代码的解释或信息或用法。例如,请参阅[此答案](http://stackoverflow.com/a/16893057/756941)。 – NAZIK 2014-01-07 10:43:02

+1

我认为这是最简单也是最正确的答案。谢谢! – usefulBee 2014-03-26 15:16:49

12

试试这个

a:hover, a:active, a:focus { 
    outline: 0; 
} 
0

这是各地的代码删除outerline,并在您的CSS下所需的类名。 (的className在IE浏览器。) 示例标签

a{ 
    _noFocusLine:expression(this.hideFocus=true); 
    outline-style:none; 
    outline:0; 

}

示例在HTML页面中的所有标签!

*{ 
    _noFocusLine:expression(this.hideFocus=true); 
    outline-style:none; 
    outline:0; 

}

举例在你的HTML页面类myClassName标签!

.myClassName{ 
    _noFocusLine:expression(this.hideFocus=true); 
    outline-style:none; 
    outline:0; 

}

示例在HTML页面中ID为myidName标签!

#myidName{ 
    _noFocusLine:expression(this.hideFocus=true); 
    outline-style:none; 
    outline:0; 

}

希望这有助于在主流浏览器,如果没有他们那么老那么有多少人仍然在使用这种旧的浏览器的机会!

说明:outline:none 0;也适用于较新的浏览器,但不是全部。但outline:0;是普遍的,在那些浏览器中不理解“无”,你会得到默认值,但0在所有浏览器中都理解使用这个大纲:。 你需要这个用于IE7 _noFocusLine:expression(this.hideFocus=true);

或使用Javascript的休息!

window.document.getElementById("myidName").blur(); 
window.document.getElementById("myidName").hideFocus=true; 
window.document.getElementById("myidName").style.outline=0; 

Obj=window.document.getElementById("myidName"); 
Obj.blur(); 
Obj.hideFocus=true; 
Obj.style.outline=0; 

或检查,如果组件中存在!

if (window.document.getElementById("myidName")){ 
    Obj=window.document.getElementById("myidName"); 
    Obj.blur(); 
    Obj.hideFocus=true; 
    Obj.style.outline=0; 
} 

JavaScript可以做的IE6和IE7和其他CSS的技巧can't!

相关问题