专注于 link 在 Firefox 中跨越整个宽度 - css

Question

在主页滑块和播放和暂停按钮上的向右箭头上切换或设置焦点时，焦点会跨越 Firefox 中的整个宽度。在 Chrome 中工作良好，并希望在 FF 中也能获得相同的功能。非常感谢任何帮助。

Answer 1

看起来这些链接需要 display:inline 或内联块。（编辑，这本来是评论）

Answer 2

经过一番挖掘（迫使 "next" link 保留 :focus）我认为是 text-indent:

.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  text-indent: -9999px;
  z-index: 9999;
}

第 145 行也有类似的规则。

如果您有权更改 HTML 和 CSS，我会删除文本缩进规则。接下来，将您不想显示的文本用 class 包裹起来，并使用雅虎用于 visibly hide the text 的相同方法，例如

<a class="bx-next" href=""><span class="sr-only">Next</span></a>

CSS:

.sr-only {
  height: 1px;
  width: 1px;
  clip: rect(1px,1px,1px,1px);
  overflow: hidden;
  position: absolute;
}

我在 "Next" link 上的 FireFox 本地尝试过它，它似乎有效，但如果无效请告诉我。

编辑：假设您不支持那么旧的浏览器，我已经删除了 clip 的 IE6/7 版本。

focus on link spanning entire width in Firefox - css