围绕IE7链接的虚线轮廓+

我无法摆脱IE7 +中的虚线轮廓。我已经添加了outline:none; border:none，但它仍然不适用于任何版本的IE。围绕IE7链接的虚线轮廓+

我已经创建了小提琴，它工作正常，当我在IE中运行小提琴时代，但是当我在HTML页面中粘贴相同的代码，那么它不工作。这里是小提琴http://jsfiddle.net/6Ayek/4/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Photos Tab</title> 
<style type="text/css"> 
/* Generated by F12 developer tools. This might not be an accurate representation of the original source file */ 
#contentContainer { BACKGROUND-IMAGE: url(/s/store/-1/common/gb/Media-Console/popup_bg.jpg); WIDTH: 636px; HEIGHT: 460px; OVERFLOW: auto} 
#leftNavigation { PADDING-LEFT: 15px; WIDTH: 125px; PADDING-RIGHT: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; FLOAT: left; FONT-SIZE: 12px} 
#leftNavigation ul {PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px} 
#leftNavigation ul li { WIDTH: 125px; DISPLAY: block; outline:none !important;} 
#leftNavigation ul li a {LINE-HEIGHT: 30px; DISPLAY: block; FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: #2c2f30; FONT-SIZE: 12px;; TEXT-DECORATION: none; outline:none !important;} 
#leftNavigation ul li a:visited { COLOR: #2c2f30; outline:none !important; border:none} 
#leftNavigation ul li a:hover { COLOR: #000000; outline:none !important; border:none} 
.currentSelection { BORDER-BOTTOM: #0076a3 1px solid; BORDER-LEFT: #0076a3 1px solid; LINE-HEIGHT: 25px; OUTLINE-STYLE: none; OUTLINE-COLOR: invert; PADDING-LEFT: 10px; OUTLINE-WIDTH: medium; DISPLAY: inline-block; BACKGROUND: #0095cd; BORDER-TOP: #0076a3 1px solid; FONT-WEIGHT: bold; BORDER-RIGHT: #0076a3 1px solid; TEXT-DECORATION: none; BEHAVIOR: url('/s/store/-1/common/gb/Media-Console/PIE.htc'); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
} 
</style> 
</head>  
<body> 
<div id="leftNavigation"> 
    <ul> 
    <li><a href="#" style="color: white; " class="currentSelection">test</a></li> 
    <li><a href="#" style="color: black; ">test 2</a></li> 
    <li><a href="#" style="color: black; ">test 2</a></li> 
    <li><a href="#" style="color: black; ">test 2</a></li> 
    <li><a href="#" style="color: black; ">test 2</a></li> 
    </ul> 
</div> 
</body> 
</html>

来源

2012-10-05 Sowmya

不要**不**删除可视的焦点指示符，用户需要它！ 1-示例：我想确认我是否在某个地方点击过，以及何时从哪个环节回来。 2-accessibility相关，请阅读[WCAG 2.0 F78失败技术]（http://www.w3.org/TR/WCAG-TECHS/F78.html），[C15]（http://www.w3.org/ TR/WCAG-TECHS/C15.html）和[SCR31]（http://www.w3.org/TR/WCAG-TECHS/SCR31.html）与您不应达到的内容相关。 – FelipeAls

你只需要为这一个短的CSS规则：

a { outline: none }

为什么它不是在你的HTML页面的工作是不可能的回答，但这是正确的CSS代码删除轮廓。

我应该提一下，这种技术不是非常易于使用，因为虚线边框对通过键盘或其他乐器导航的人有帮助。更好的方法是这样jQuery的片段：

(function($) { 
    $(document).on('mousedown mouseup', 'a', function(e) { 
     if ('hideFocus' in this) { // IE 
      this.hideFocus = e.type == 'mousedown'; 
     } 
     this.blur(); 
    }); 
}(jQuery));

UPDATE

我误解你的问题的IE7部分...你可以尝试添加：

a:focus{ 
    noFocusLine: expression(this.onFocus=this.blur()); 
}

但最好的解决办法仍然是jQuery/javascript方法。

来源

2012-10-05 07:37:47 David

正如我已经提到的问题，我已经使用大纲和边框属性，但它仍然不能在HTML页面中工作，但在小提琴页面工作 – Sowmya

有没有办法可以调试您的HTML页面，我只能看到你在这里发布的代码。你创作的CSS看起来很乱，我怀疑有一些验证问题。你可以尝试先验证你的代码，看看它是否有帮助。 – David

检查我更新的问题。代码甚至是W3C有效，代码中没有问题。我不认为CSS看起来很混乱，只有几行。你可以复制整个代码在HTML页面中运行，即你可以看到大纲 – Sowmya

对outline属性的支持是added in IE 8，所以该技术在IE 7上不起作用。在较新的版本中，它的确如此;您的代码在IE 9上测试时，可以在IE 9模式和IE 8模式下使用。（将“作品”定义为“产生期望的可用性问题”）。

要在IE 7上实现预期的效果，可以使用专有的HTML属性hidefocus，例如，

或在JavaScript中设置相应的DOM属性hideFocus。

来源

2012-10-05 07:55:41

如果您可以在网页上使用JavaScript，试试这个，是为我工作在IE9和FF15：

<script type="text/javascript"> 

     if (document.documentElement.attachEvent) 
      document.documentElement.attachEvent('onmousedown', function(){event.srcElement.hideFocus=true}); 

    </script>

来源

2012-10-05 07:57:56 Cirou

围绕IE7链接的虚线轮廓+

回答

相关问题