错误的焦点大纲围绕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>

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