如何在點擊在Firefox上引導導航欄去除白盤旋盒

我有以下代碼：如何在點擊在Firefox上引導導航欄去除白盤旋盒

.navbar.navbar-inverse .navbar-brand { 
 
    color: #fff; 
 
} 
 
.navbar.navbar-inverse .navbar-nav > li > a { 
 
    color: #fff; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Case</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
     </div> 
 
     <div> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">About</a> 
 
      </li> 
 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Help</a> 
 
       </li> 
 
       <li><a href="#">Contact/a> 
 
       </li> 
 

 
      </ul> 
 
      </li> 
 
      <li><a href="#">Page 2</a> 
 
      </li> 
 
      <li><a href="#">Page 3</a> 
 
      </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a> 
 
      </li> 
 
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
    <div class="container"> 
 
    <h3>Right Aligned Navbar</h3> 
 
    <p>some text.</p> 
 
    </div> 
 

 
</body> 
 

 
</html>

現在，如果你執行在Firefox上面的代碼，然後點擊About。你會看到這樣的事情：

我怎樣才能去除白盤旋盒？在Safari或Chrome上沒有問題。

來源

2015-09-25 neversaint

鏈接周圍的虛線邊框是默認情況下大多數瀏覽器都具有的輔助功能。對於必須或選擇通過鍵盤進行導航的用戶，在「選項卡式」到時，會在這些鏈接上應用視覺樣式。這些邊界也出現鏈接被點擊時（在它的「活動」狀態），並且可以根據設計礙眼（尤其是使用類似CSS圖片替換時，該邊界跨越屏幕的長度）。

要刪除做到這一點：

FIREFOX

input::-moz-focus-inner { 
    border: 0; 
}

FOR ALL

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

來源

2015-09-25 10:20:52

這是通過默認的引導CSS規則引起的：

a:focus { 
    outline: thin dotted; 
    outline-offset: -2px; 
}

您需要設置焦點outline: 0。如果你想在導航條上專門刪除它，你可以使用代碼片段。

否則，將其覆蓋了所有的鏈接與a:focus { outline: 0 none; }檢查自定義CSS的優先次序爲較高即放置引導文件之後。

.navbar.navbar-inverse .navbar-brand { 
 
    color: #fff; 
 
} 
 
.navbar.navbar-inverse .navbar-nav > li > a { 
 
    color: #fff; 
 
} 
 

 
/* Added code */ 
 
.navbar-inverse .navbar-nav > .active > a:focus { 
 
    outline: 0; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Case</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
     </div> 
 
     <div> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">About</a> 
 
      </li> 
 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Help</a> 
 
       </li> 
 
       <li><a href="#">Contact/a> 
 
       </li> 
 

 
      </ul> 
 
      </li> 
 
      <li><a href="#">Page 2</a> 
 
      </li> 
 
      <li><a href="#">Page 3</a> 
 
      </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a> 
 
      </li> 
 
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
    <div class="container"> 
 
    <h3>Right Aligned Navbar</h3> 
 
    <p>some text.</p> 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2015-09-25 10:21:15

如何在點擊在Firefox上引導導航欄去除白盤旋盒

回答

相關問題