我:focus-visible在 Chrome、Edge 和 Canary 中出現了奇怪的行為。我希望導航欄上的錨點在使用鍵盤聚焦時顯示紫色輪廓。他們的課程包括outline: $the-purple-color auto 1px !important.
然而，當我聚焦這些元素時，在很短的時間內，我得到一個黑色的輪廓，然后立即切換到正確的顏色。黑色似乎來自帶有偽類的“用戶代理樣式表” :focus-visible { outline: -webkit-focus-ring-color auto 1px; }，其中-webkit-focus-ring-color似乎是黑色。我相信這是黑色輪廓的來源，因為如果我關閉自定義類，它將默認為“用戶代理樣式表”之一。
我在網上沒有發現這種現象。如何在不閃爍到默認顏色的情況下將我的輪廓保持為一種純色？
編輯：這是代碼：
<header class="main-header">
<div class="row">
<div class="col col-12">
<nav class="navbar">
<div>
<ul>
<li class="nav-item">
<a>Home</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
header {
&.main-header {
.navbar {
li {
a {
&:focus-visible {
// $menu-hover-color: #bf00ff
outline: $menu-hover-color auto 1px !important;
}
}
}
}
}
}
編輯：我已經嘗試過的事情串列：
- 更改了十六進制顏色的變數。
- 將變數更改為另一種顏色。
- 將輪廓標準化
*:focus-visible為0。 - 將 的輪廓標準化
*:focus-visible為另一種顏色。我仍然得到黑色的眨眼。 - 為包裝
li提供outline-colour紫色和黑色以外的顏色，以查看此元素是否拾取了黑色閃爍。
uj5u.com熱心網友回復：
問題是另一個類正在添加一個transition: ... all會產生意想不到的后果。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/364859.html
標籤：html css 谷歌浏览器 bootstrap-4 蠢货
上一篇：ChromeDriver版本不匹配錯誤：會話未創建：此版本的ChromeDriver僅支持Chrome版本91
下一篇：拼接子影像以重建原始影像