by clemens (04.1010.2021)

Nesting Anchors not Working in Firefox

tl;dr

Do not try to nest <a> tags in Firefox, that will cause Firefox to mangle up the layout.

I had a list of subpages, with a short summary of the supbage that looked like this:

<section>
    <a href="to-subpage">
        <h3>Some title</h3>
        <p>
            The short summary with a <a href="http://someplace.com">link inside it</a>.
        </p>
    </a>
</section>

That caused Firefox to add an additional anchor tag between the section and the surrounding anchor, breaking the layout of the page. Instead I’m only linking from the header now:

<section>
    <a href="to-subpage">
        <h3>Some title</h3>
    </a>

    <p>
        The short summary with a <a href="http://someplace.com">link inside it</a>.
    </p>
</section>