by
clemens
(04.10.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>