在 Microsoft Edge 中切换链接时出现奇怪的大纲行为

Question

我在 Microsoft Edge（版本 44.17763.831.0）中遇到了奇怪的行为。我有一个包含链接的简单有序列表。当一个链接被聚焦时，一个简单的轮廓适用于该链接。使用键盘上的制表符浏览链接后，大纲并没有真正消失。有时会，有时不会。

这是导致该行为的代码。 复制：

1. 通过单击灰色 div 聚焦 HTML 正文
2. 按 Tab 或 Shift + Tab 浏览链接

a {
  text-decoration: none;
}

a:focus{
  outline: 2px solid green;
  outline-offset: 10px;
} 

<div style="padding: 20px; background-color: #ccc;">Click here to focus HTML Body</div>


<ul>
  <li>
    <a href="#"#>Link 1</a>
  </li>
  <li>
    <a href="#"#>Link 2</a>
  </li>
  <li>
    <a href="#"#>Link 3</a>
  </li>
  <li>
    <a href="#"#>Link 4</a>
  </li>
  <li>
    <a href="#"#>Link 5</a>
  </li>
  
</ul>

有人知道这种行为的解决方法吗？当我用盒子阴影替换轮廓时也会发生这种情况。

Answer 1

我在 Edge Legacy 中对其进行了测试并重现了该问题。 Edge Legacy 中的轮廓似乎是重叠的，如果轮廓区域的某些部分重叠，则轮廓不会像想象的那样消失。这看起来像是 Edge Legacy 浏览器的问题。我不确定它是否会在可预见的时期内修复，因为新的 Edge with Chromium 发布。

您可以使用以下代码作为解决方法：使用 @supports (-ms-ime-align: auto) 在 css 中定位 Edge Legacy 并为链接设置填充，以便轮廓不会重叠。

a {
  text-decoration: none;
}

a:focus {
  outline: 2px solid green;
  outline-offset: 10px;
}

@supports (-ms-ime-align: auto) {
  li {
    padding: 15px;
  }
}

<div style="padding: 20px; background-color: #ccc;">Click here to focus HTML Body</div>

<ul>
  <li>
    <a href="#" #>Link 1</a>
  </li>
  <li>
    <a href="#" #>Link 2</a>
  </li>
  <li>
    <a href="#" #>Link 3</a>
  </li>
  <li>
    <a href="#" #>Link 4</a>
  </li>
  <li>
    <a href="#" #>Link 5</a>
  </li>

</ul>

Answer 2

请更新您的 Microsoft Edge。最新版本的 edge 没有此问题。我已在最新版本的 edge 上尝试过您的代码。

看看

录屏 https://drive.google.com/open?id=1W332ok9vcK2ESMVO0_NDA_M9OCSDI-Im