2012-08-17 189 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!