圍繞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鏈接的虛線輪廓+

回答

相關問題