焦点模糊时 MS Edge 轮廓伪影？
MS Edge outline artifact on focus blur?
我在一个简单的弹出菜单中有一系列垂直排列的 <a> 元素。对于 a11y，我已经连接了键盘事件并且我正在使用 jQuery 来 focus() <a>。 <a> 由 React 渲染，但它们的处理程序通过 jQuery 附加。 css 中的一些定义了具有 2px 轮廓的 <a> 焦点样式。 仅在 MS Edge 中， 当我移动焦点时，先前聚焦的 <a> 有一条水平 1px 伪影线，与 <a> 一样宽。将焦点移至 lower/next <a> 会导致伪像出现在先前聚焦的 <a> 的 top 上，将焦点移至 higher/previous <a> 导致工件出现在 下方 <a>。我已经使用 Edge 的开发人员面板应用伪 类 并在受影响的 <a> 上设置各种大纲规则 - 工件仍然存在。这 <a> 也有 border:0。有任何想法吗？
好吧，我已将行高规则应用到包含带链接的无序列表的 div。当我禁用该规则时，不再有工件。我打算就此打住……我不确定互操作的交互/间距规则是什么，但由于问题已解决，就是这样。
我在一个简单的弹出菜单中有一系列垂直排列的 <a> 元素。对于 a11y，我已经连接了键盘事件并且我正在使用 jQuery 来 focus() <a>。 <a> 由 React 渲染，但它们的处理程序通过 jQuery 附加。 css 中的一些定义了具有 2px 轮廓的 <a> 焦点样式。 仅在 MS Edge 中， 当我移动焦点时，先前聚焦的 <a> 有一条水平 1px 伪影线，与 <a> 一样宽。将焦点移至 lower/next <a> 会导致伪像出现在先前聚焦的 <a> 的 top 上，将焦点移至 higher/previous <a> 导致工件出现在 下方 <a>。我已经使用 Edge 的开发人员面板应用伪 类 并在受影响的 <a> 上设置各种大纲规则 - 工件仍然存在。这 <a> 也有 border:0。有任何想法吗？
好吧，我已将行高规则应用到包含带链接的无序列表的 div。当我禁用该规则时，不再有工件。我打算就此打住……我不确定互操作的交互/间距规则是什么，但由于问题已解决，就是这样。