Html Internet Explorer中锚定内容的焦点轮廓错误

虽然在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>

盒子测试

你知道我怎样才能让焦点提纲像预期的那样工作吗？

---

我只能找到关于如何完全删除大纲的建议，这对于可访问性来说并不理想。

非常旧的IE或IE11。。顺便问一下，你为什么说这是错的？也许在IE的世界里，像这样是正确的。我说错了，因为IE通常会在锚的内容周围显示点焦点轮廓（就像Chrome和Firefox一样），但在这种情况下不会。虽然HTML5允许像

这样的块级元素包装在

中（HTML4和XHTML1不允许这样），但某些浏览器仍然无法正确呈现（在本例中，即）。您需要禁用

：focus

样式规则中的

大纲来进行补偿。您也可以发布CSS吗？