Wrong Focus Outline around anchor content in Internet Explorer - html

Question

While everything is working fine in Chrome and Firefox, I am having issues in IE displaying correctly the outline focus around the content of some anchor elements.
As you can see in the picture the focus outline is outside the box, in a collapsed status (it looks like a dotted line) and not around it like in the other browsers.
That part of my 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>
Any idea about on how I could have the focus outline work as expected?
I've only been able to find suggestions on how to remove the outline altogether, which is not ideal for accessibility reasons.