Wrong dashed outline around a <div>

Question

If you click here, then click on the link "A new article" and then come back to the previous page (browser history previous page), you will see this:

Why this strange dashed polygonal form/geometry? How to have it rectangular instead?

The code seems normal:

<div class="article">
  <a href="article/coolarticle">
    <h2 class="articletitle">A new article</h2>
    <div class="articleinfo">by Jo, on 2015 April 10th</div>
  </a>
  ...
</div>

Answer 1

Apply below style to the a tag should make the outline to be a rectangle:

<a href="article/coolarticle" style="display:block;">