This is an example of the rendering issues in Firefox (tested against 3.5.2).
When we wrap the block content with a link, if Firefox encounters a nested section
element, Firefox closes all the open elements, and moves the contents outside, which causes
the entire DOM to change structure.
The first example is a reference example showing how it should work with a div
element.
The following two are examples using section
elements, both have been modified by
the parsing engine in Firefox.
The correct output should have a white background against all the content.
h2 nested in a div wrapped in a link
p nested in a section wrapped in a link
h2 nested in a section wrapped in a link
The a
element with a nested section
element causes Firefox to
trigger it's own rendering, cause the DOM to be reordered incorrectly.
In this example, all the content should be sitting on the white background.