html - Internet Explorer 中围绕锚点内容的焦点大纲错误

Question

虽然在 Chrome 和 Firefox 中一切正常，但我在 IE 中遇到问题，无法正确显示围绕某些锚元素内容的大纲焦点。

正如您在图片中看到的，焦点轮廓位于框外，处于折叠状态（看起来像虚线），而不是像其他浏览器那样围绕它。

我的 HTML 的那部分：

<section class='section'>
  <div class='container'>
    <div class='row mb-lg'>
      <header class='col-md-8 col-md-offset-2 text-center'>
        <h2 class='heading-with-bullet'>
             Box Tests
        </h2>
      </header>
    </div>
    <div class='row'>
      <div class='col-sm-4'>
        <a href='/tests/test1'>
          <div class='test-box'>
            <div>

              Test1
            </div>
          </div>
        </a>
      </div>
      <div class='col-sm-4'>
        <a href='/tests/test2'>
          <div class='test-box'>
            <div>

              Test2
            </div>
          </div>
        </a>
      </div>
      <div class='col-sm-4'>
        <a href='/tests/test3'>
          <div class='test-box'>
            <div>

              Test3
            </div>
          </div>
        </a>
      </div>
     </div>
  </div>
</section>

关于如何让焦点大纲按预期工作的任何想法？我只能找到有关如何完全删除大纲的建议，这对于可访问性的原因并不理想。

标签： htmlcssinternet-exploreroutline